Nasıl iPhone gibi HTML metin giriş kutusu içinde net bir buton koyacağım?

SORU

10 Mayıs 2010, PAZARTESİ

Nasıl iPhone gibi HTML metin giriş kutusu içinde net bir buton koyacağım?

Küçük ve güzel bir simge tıklandığında < metni;GİRİŞ> kutusunu temizlemek zaman olacak, istiyorum.

Bu alanı kaydetmek yerine giriş kutunun dışına net bir ilişki yaşıyor.

CSS becerilerim zayıf. Burada birekran görüntüsüiPhone nasıl göründüğü fotoğraf.

CEVAP

10 Mayıs 2010, PAZARTESİ

@thebluefox tüm en özetlenmiştir. Sadece JavaScript ile o düğmeye zaten iş yapmak için kullanmak zorunda kalıyorsunuz. İşte bir SSCCE, ''sini' 'run kopyalayabilirsiniz:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
                    $(this).prev('input').val('').focus();
                }));
            });
        </script>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
            }
        </style>
    </head>
    <body>
        <input type="text" class="deletable">
    </body>
</html>

Live example here.

jQuery yol gerekli değildir, sadece güzel mantık kaynağından ilerici geliştirme için gerekli ayırır, tabii ki de devam edebilirsinizdüz/JS: HTML/CSS

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532, with "plain" HTML/CSS/JS</title>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
            }
        </style>
    </head>
    <body>
        <span class="deleteicon">
            <input type="text">
            <span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span>
        </span>
    </body>
</html>

Sen sadece çirkin HTML (ve non-crossbrowser uyumlu JS;)) ile sona erer.

''feel en büyük endişe, ama işlevselliği değil UI bak, o zaman sadece <input type="text"> yerine <input type="search"> kullandığını unutmayın. HTML5 destekli tarayıcıların (browser özgü) Temizle düğmesine gösterecektir.