2009-10-26 21 views
27

İçinde metni olan bir html giriş alanı kolayca oluşturabilirim. Ancak kullanıcı giriş alanına tıkladığında metin kaybolmaz ancak orada kalır. Kullanıcı daha sonra yazılacak metni elle kaldırmak zorundadır. Kullanıcı giriş alanı kutusuna tıkladığında metnin daha sonra kaybolduğu bir giriş alanını nasıl oluşturabilirim?Tıklatıldığında kaybolmak için HTML Alanı'ndaki metin alanı?

cevap

3

Böyle bir şeye ne dersin?

<input name="myvalue" type="text" onfocus="if(this.value=='enter value')this.value='';" onblur="if(this.value=='')this.value='enter value';">

Bu ilk kez odaklama üzerine temizleyin, ama sonra boş bırakılmıştır o verilen değeri geri kullanıcı kendi değerini, girdikten sonra müteakip odak noktaları belli değil tutarım.

20

bunu başarmak için, iki onfocus etkinliklerle onblur kullanabilirsiniz:

<input type="text" name="theName" value="DefaultValue" 
    onblur="if(this.value==''){ this.value='DefaultValue'; this.style.color='#BBB';}" 
    onfocus="if(this.value=='DefaultValue'){ this.value=''; this.style.color='#000';}" 
    style="color:#BBB;" /> 
+0

ve ne olur, boş bir değer veya defaul değeri geçecek? Benim kullanım durumum da bununla aynıdır fakat kullanıcının boş bir değer girmediğinde olmasını istiyorum, nasıl atacağımızı nasıl atayacağız? Herhangi bir öneri? Ve placholder özniteliği kullanımı yok – mahesh

+0

@mahesh Yapabilecekleriniz, üzerine yazdığınız istenen metne sahip bir arka plan resmi eklemeniz ve görüntüyü görünmez kılan onClick olay dinleyicisini eklemektir. –

+0

hala IE9'u desteklemeniz gerekiyorsa bu BÜYÜK bir çözüm! Teşekkürler! –

139

Ne HTML5 Girdinizin kutusu için varsayılan değer ayarlamanıza olanak tanıyan placeholder özelliğini kullanın yapmak istiyorum:

<input type="text" name="inputBox" placeholder="enter your text here">

Bu, aradığınız şeyi elde etmelidir. Ancak, dikkatli olun çünkü yer tutucu özniteliği Internet Explorer 9 ve önceki sürümlerde desteklenmez. Bunu bir deneyin:

+2

HTML5 bu sorunu yer tutucu özniteliğiyle çözüyor. Olayları tekrar yönetmeye gerek yok. Iyi cevap – Ron

+0

giriş placeholer özniteliği IE9 ve IE8'de desteklemiyor ... daha fazla bilgi için lütfen http://caniuse.com adresine gidin. –

+0

Kullanıcı yazmaya başladığında yer tutucunun kaybolması için bir yol var mı, ancak alan yokken yok 'duruldu.'? –

3

bunu deneyin. Bu yardımcı olur umarım bu yardımcı olur.

<input type="submit" id= "submitBtn" value="Submit"> 

sonra js dosyasında bu küçük jQuery koymak: Bu teslim düğme

<input name="myvalue" id="valueText" type="text" value="ENTER VALUE"> 

:

+0

ile ve kullanıcı vlue girmezse, boş değer mi yoksa varsayılan değer mi geçecek? Benim kullanım durumum da bununla aynıdır fakat kullanıcının boş bir değer girmediğinde olmasını istiyorum, nasıl atacağımızı nasıl atayacağız? Herhangi bir öneri? Ve placholder özniteliği kullanımı yok – mahesh

5

Bu senin bütün sorunları çözmek gerekir çözümünü düşünmek kadar basittir

//this will submit only if the value is not default 
$("#submitBtn").click(function() { 
    if ($("#valueText").val() === "ENTER VALUE") 
    { 
     alert("please insert a valid value"); 
     return false; 
    } 
}); 

//this will put default value if the field is empty 
$("#valueText").blur(function() { 
    if(this.value == ''){ 
     this.value = 'ENTER VALUE'; 
    } 
}); 

//this will empty the field is the value is the default one 
$("#valueText").focus(function() { 
    if (this.value == 'ENTER VALUE') { 
     this.value = ''; 
    } 
}); 

Ayrıca eski tarayıcılarda da çalışır. İhtiyacınız varsa kolayca normal javascript'e dönüştürülebilir.

+0

Teşekkürler, desteklemesi gereken IE9 üzerinde çalışır.Bu yüzden yer tutucu şeyi kullanamadım. Metin kutusundaki değerin tek bir yerde kalmasını sağlamak için, belgede hazır olan değeri kutuya ayarlamak için jQuery'yi kullandım. $ (document) .ready (function() {belgenin yüküne \t/* set arama giriş kutusu değeri */ \t $ ('# DEĞERMETNI') val ("DEĞERİ ENTER");. } – atsurti

4

bu kadar basit: Kullanıcı vlue girmezse <input type="text" name="email" value="e-mail..." onFocus="this.value=''">

İlgili konular