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


210

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.


4
soru sorulduğundan beri HTML5 yer tutucu özelliği tüm tarayıcılar tarafından desteklenmiştir.
Jasen

Merhaba Michael. Bu sayfada kabul edilen cevabı değiştirmek ister misiniz? Kabul edilen cevaptan farklı olan açık bir kazanan var gibi görünüyor.
null

Bir JavaScript çözümüyle ilgili sorun, herkesin JavaScript'in açık olmamasıdır. NoScript gibi bir tarayıcı eklentisi kullanılırsa metin kutusu odaklandığında yer tutucu kaybolmaz (geliştiricilerin yüklemesi için çok kullanışlıdır). Yer Tutucu seçeneği en sağlam çözümdür.
Sablefoste

Yanıtlar:


365

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:

enter image description here

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();

@Duke, Fx3.7 +, (Safari / Chrome) ve Opera'da çalışır. IE9 desteklemiyor, bu yüzden sanırım IE8 de değil.
Alessandro Vermeulen

Evet, bugün yeni öğrendim ki FF3.6 bunu desteklemiyor.
Drew Noakes

Bence yine taşındı. Burada buldum: github.com/mathiasbynens/jquery-placeholder
jocull

Uyarı geliştiricisi "Internet Explorer 10 ve 11, alan boş olsa bile alan odaklandığında yer tutucuyu göstermez."
Albay Panik

92

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

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


4
İkinci bağlantı koptu. Bu benzer olabilir: digitalbush.com/projects/watermark-input-plugin
Michael Haren

14
Başka bir jQuery yaklaşımı buldu. Bu proje @ code.google.com/p/jquery-watermark
JP Hellemons

4
Digitalbrush eklentisi 'filigranı' veritabanına kaydeder. Beta sürümündedir ve 2007'den beri güncellenmemiştir. Bunun yerine @JP'nin önerdiği gibi code.google.com/p/jquery-watermark kullanılmasını öneriyorum .
Kimball Robinson

1
Sorunun yazarı geri dönmeli ve @JP yorumu en iyi cevap olarak işaretlemek gerektiğini düşünüyorum.
Randy L

2
JQuery filigran eklentisi, girişin önceden doldurulmuş değerle aynı olduğu durumu işlemediğinden oldukça noob'dur. Bu durumda, giriş metninizi tekrar gri yapar!
atp

41

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">


Bunu arıyordum, ta - daha fazla bilgi diveintohtml5.org/forms.html#placeholder
David Yell

2
Bu şimdi kabul edilen cevap olmalı. Yer tutucu özniteliği, bu ilk olarak 2010'da yayınlandığında yaygın olarak desteklenmiyor olabilir, ancak şimdi IE8 dışındaki tüm mevcut tarayıcılar tarafından desteklenmektedir.
JSP64

20

Ö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;
}

2
Aynı şeyi yapan ama daha rahat ve bakımı kolay bir şekilde yanıt gönderdim: stackoverflow.com/questions/108207/…
Drew Noakes

6

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.


Bu aramalar için uygundur, ancak çoğu durumda filigranların herhangi bir gönderim etkinliğinde gönderilmesini istemezsiniz.
Kimball Robinson

@ k.robinson I + 1 bu ifadeyi + 1'leyin. Bu, o anda en hızlı ve en kompakt koddu. Bir javascript kod bloğu ile daha ince taneli çözülebilir.
Seb Nilsson

4

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 .


1
Ama kırılmış. Eğer ipucu olan aynı metni
girersem

2
@Stephan: Evet, bildiğim tek uyarı bu. Aslında bunu pratikte bir sorun olarak buldunuz mu? Eğer öyleyse, yukarıdaki bir div katmanını ve görüntüleme / gizleme konusunu araştırmanız gerekebilir. Bu bildiğim en basit çözüm. JavaScript devre dışı bırakıldığında da güzel şekilde bozulurum.
Drew Noakes

Değerin ayarlanmasıyla tetiklendim. Mevcut veya varsayılan bir değerle ön doldurma ihtiyacım var ve metin kutusu boşken bir ipucu var
Stephan Eggermont

@Stephan - Aslında bugün buna ihtiyacım var ve jQuery eklentilerine bakıyorum. Kabul edilen cevapta bağlantılı olan benimkiyle aynı problemi yaşıyor. Bir alternatif biliyor musun?
Drew Noakes

3

İş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.




2

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 .


2

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).


2

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.


1

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");
        }
    });
});

1

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">

0

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();" />

0

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();

0

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;
}

0

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.


-1
$('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">

-1

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


Yararlı olmasına rağmen, bunun soru ile ilgisi yoktur.
Quentin

-3

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

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.