ve şifre inputlarımız var. İnputların içinde de "Kullanıcı adı" ve "Şifre" yazıyor.
Tıklanan inputun içi boşalsın diye click ile $(this).val('') yapabiliriz. peki, kullanıcı adı'na tıkladık, bir şey yazmadan alttaki şifre input'una tıklayınca, kullanıcı adı inputunun için yine default hale dönsün yani "kullanıcı adı" yazsın. eğer bir değer yazdıysak değişmesin.
böyle bir şeyi nasıl yaparız ki
ben kendim şöyle bir standart kullanıyorum mesela,
<input type="text" data-default="Kullanıcı Adı" >
$("input:text, textarea").each(function(){
if ($(this).data("default") && $(this).val() == "")
$(this).val($(this).data("default"));
}).focus(function() {
if (!$(this).data("default")) {
$(this).data("default",$(this).val());
}
if ($(this).data("default") == $(this).val())
$(this).val("");
}).blur(function() {
if ($(this).val() == "") {
$(this).val($(this).data("default"));
}
});
örnek-> jsfiddle.net
html5 placeholder attribute'u yapıyor o işi. ama focus alınca silinip silinmeyeceği browser'ın implementasyonuna bağlı. chrome silmiyor mesela. olmadı jquery için bir sürü placeholder plugin'i var zaten.
<input type="text" value="Kullanıcı adı" onFocus="if(this.value =='Kullanıcı adı' ) this.value=''" onBlur="if(this.value=='') this.value='Kullanıcı adı'">