HTML metin kutusunun boşken nasıl bir ipucu göstermesini nasıl sağlayabilirim?

Web sayfamdaki arama kutusunun "Arama" kelimesini gri italik olarak göstermesini istiyorum. Kutu odaklandığında, boş bir metin kutusu gibi görünmelidir. İçinde zaten metin varsa, metni normal olarak göstermelidir (siyah, italik olmayan). Bu, etiketi kaldırarak dağınıklığı önlememe yardımcı olacaktır.

BTW, bu bir sayfa Ajax aramasıdır, bu yüzden düğmesi yoktur.

Başka bir seçenek, bu özelliği yalnızca yeni tarayıcılarda kullanmaktan memnunsanız, HTML 5'in yer tutucu özelliği tarafından sunulan desteği kullanmaktır :

<input name="email" placeholder="Email Address">

Herhangi bir stilin yokluğunda, Chrome'da bu şöyle görünür:

Demoları burada ve HTML5 Yer Tutucu Stilinde CSS ile deneyebilirsiniz .

Bu özelliğin tarayıcı uyumluluğunu kontrol ettiğinizden emin olun . Firefox'ta destek 3.7'de eklendi. Chrome iyi. Internet Explorer yalnızca 10'da destek ekledi. Giriş yer tutucularını desteklemeyen bir tarayıcıyı hedefliyorsanız, jQuery HTML5 Placeholder adlı bir jQuery eklentisi kullanabilir ve ardından etkinleştirmek için aşağıdaki JavaScript kodunu ekleyebilirsiniz.

$('input[placeholder], textarea[placeholder]').placeholder();

Bu metin kutusu filigranı olarak bilinir ve JavaScript ile yapılır.

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

veya jQuery kullanıyorsanız, çok daha iyi bir yaklaşım:

• http://digitalbush.com/projects/watermark-input-plugin/
• veya code.google.com/p/jquery-watermark

Yer tutucuyu HTML'deki placeholderözelliği kullanarak ayarlayabilirsiniz ( tarayıcı desteği ). font-styleVe coloredilebilmektedir CSS ile değiştirildi (tarayıcı desteği sınırlı olsa da).

input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
 color:gray;
 font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
 color:gray;
 font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
 color:gray;
 font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
 color:gray;
 font-style:italic;
}

<input placeholder="Search" type="search" name="q">

Özel bir CSS sınıfı ekleyip kaldırabilir ve giriş değerini onfocus/ onblurJavaScript ile değiştirebilirsiniz :

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

Ardından , CSS'nizde istediğiniz stile sahip bir ipucu sınıfı belirtin , örneğin:

input.hint {
    color: grey;
}

En iyi yol, jQuery veya YUI gibi bir tür JavaScript kitaplığı kullanarak JavaScript etkinliklerinizi bağlamak ve kodunuzu harici bir .js dosyasına koymaktır.

Ancak hızlı ve kirli bir çözüm istiyorsanız, bu satır içi HTML çözümünüzdür:

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

Güncellendi : İstenen renklendirme maddeleri eklendi.

Bir süre önce web siteme bunun için bir çözüm gönderdim . Kullanmak için tek bir .jsdosyayı içe aktarın :

<script type="text/javascript" src="/hint-textbox.js"></script>

Ardından, CSS sınıfıyla ilgili ipuçları olmasını istediğiniz girdilere açıklama ekleyin hintTextbox:

<input type="text" name="email" value="enter email" class="hintTextbox" />

Daha fazla bilgi ve örnek burada bulunabilir .

İşte Google Ajax kitaplığı önbelleği ve bazı jQuery sihri ile işlevsel bir örnek.

Bu CSS olurdu:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

Bu JavaScript kodu olurdu:

<script language="javascript"
        type="text/javascript"
        src="http://www.google.com/jsapi">
</script>
<script>
    // Load jQuery
    google.load("jquery", "1");

    google.setOnLoadCallback(function() {
        $("#search_form")
            .submit(function() {
                alert("Submitted. Value= " + $("input:first").val());
                return false;
        });

        $("#keywords")
            .focus(function() {
                if ($(this).val() == 'Search') {
                    $(this)
                    .removeClass('inputblank')
                    .val('');
                }
            })
            .blur(function() {
                if ($(this).val() == '') {
                    $(this)
                    .addClass('inputblank')
                    .val('Search');
                }
            });
    });
</script>

Ve bu HTML:

<form id="search_form">
    <fieldset>
        <legend>Search the site</legend>
            <label for="keywords">Keywords:</label>
        <input id="keywords" type="text" class="inputblank" value="Search"/>
    </fieldset>
</form>

Umarım hem GAJAXLib'lerle hem de jQuery ile ilgilenmeniz yeterlidir.

Şimdi çok kolaylaştı. Html'de giriş öğeleri için yer tutucu özniteliği verebiliriz .

Örneğin

<input type="text" name="fst_name" placeholder="First Name"/>

daha fazla ayrıntı için kontrol edin: http://www.w3schools.com/tags/att_input_placeholder.asp

JQuery kullanıcıları için: naspinski'nin jQuery bağlantısı bozuk görünüyor, ancak bunu deneyin: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

Bonus olarak ücretsiz bir jQuery eklentisi eğitimi alırsınız. :)

JQuery eklentisi jQuery Watermark en iyi cevap listelenen daha iyi bulundu. Neden daha iyi? Çünkü şifre giriş alanlarını destekliyor. Ayrıca, filigranın (veya diğer özelliklerin) rengini ayarlamak, .watermarkCSS dosyanızda bir referans oluşturmak kadar kolaydır .

Buna "filigran" denir.

İlk cevaptan farklı olarak ekstra kurulum gerektirmeyen jQuery eklentisi jQuery filigranını buldum (orijinal yanıt ayrıca form gönderilmeden önce özel bir çağrıya ihtiyaç duyar).

Kullanım jQuery Form Bildirici - en popüler jQuery eklentilerinden biridir ve buradaki diğer jQuery önerilerinden bazılarının hatalarından muzdarip değildir (örneğin, filigranı, veri tabanı).

jQuery Watermark doğrudan form öğelerinde tek bir CSS stili kullanır (Filigrana uygulanan CSS yazı tipi boyutu özelliklerinin de metin kutularını etkilediğini fark ettim - istediğimi değil). JQuery Watermark ile artı, metinleri alanlara sürükleyip bırakabilirsiniz (jQuery Form Notifier buna izin vermez).

Başkaları tarafından önerilen başka bir tane (digitalbrush.com'da bulunan) yanlışlıkla filigran değerini formunuza gönderecektir, bu yüzden şiddetle karşı çıkmanızı şiddetle tavsiye ederim.

Metni oluşturmak için arka plan resmi kullanın:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

O zaman tek yapmanız gereken value == 0doğru sınıfı tespit etmek ve uygulamaktır:

 <input class="foo fooempty" value="" type="text" name="bar" />

Ve jQuery JavaScript kodu şuna benzer:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

Kolayca bir kutu "Ara" okumak olabilir sonra odak olarak değiştirilirse metin kaldırılır. Bunun gibi bir şey:

<input onfocus="this.value=''" type="text" value="Search" />

Elbette bunu yaparsanız kullanıcının kendi metni tıkladığında kaybolacaktır. Yani muhtemelen daha sağlam bir şey kullanmak istersiniz:

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">

Sayfa ilk yüklendiğinde, metin kutusunda Ara'nın görünmesini istiyorsanız gri renkte görünmesini sağlayın.

Giriş kutusu odağı aldığında, kullanıcının yazmaya başlayabilmesi için arama kutusundaki metnin tamamını seçin, böylece işlemdeki seçili metni siler. Bu, kullanıcı arama kutusunu ikinci kez kullanmak istediğinde de iyi çalışır, çünkü silmek için önceki metni manuel olarak vurgulamak zorunda kalmazlar.

<input type="text" value="Search" onfocus="this.select();" />

Basit ve açık - "Bilgi Chikuse" çözümünü seviyorum. Yalnızca sayfa yüklemesi hazır olduğunda bulanıklaştırmak için bir arama eklemeniz gerekir; bu, başlangıç ​​durumunu ayarlar:

$('input[value="text"]').blur();

Odaklanmaya böyle bir şey atamak istiyorsunuz:

if (this.value == this.defaultValue)
    this.value = ''
this.className = ''

ve bu onblur'a:

if (this.value == '')
    this.value = this.defaultValue
this.className = 'placeholder'

(İsterseniz, sınıf adı anahtarlamasını yapmak için çerçeve işlevi gibi biraz daha akıllıca bir şey kullanabilirsiniz.)

Bunun gibi bazı CSS'lerle:

input.placeholder{
    color: gray;
    font-style: italic;
}

Harika çalışan basit, tek satırlık bir javascript çözümü kullanıyorum. Hem metin kutusu hem de metin alanı için bir örnek:

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

yalnızca "dezavantajı" alan değeri ile herhangi bir şey yapmadan önce $ _POST veya Javascript doğrulamasında doğrulamaktır. Alanın değerinin "Metin" olmadığını kontrol etmek.

$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

Basit Html 'zorunlu' etiketi kullanışlıdır.

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

Formu göndermeden önce bir giriş alanının doldurulması gerektiğini belirtir veya gönder düğmesine basar. İşte örnek

Http://asp.net adresinden AJAXToolkit kullanıcısı