jQuery表单Input文本框默认说明文字获得焦点后消失效果

法一：


加入以下jQuery代码








var txt=[];  
var textbox=$('input:text');  
textbox.each(function(){  
txt.push($(this).val());  
});  
textbox.focus(function(){  
$(this).val("");  
});  
textbox.blur(function(){  
if($(this).val()== ""){  
var recover=txt[textbox.index($(this))];  
$(this).val(recover);  
}});   




改良版：（2012-2-24添加）








$('input:text').each(function(){  
var txt = $(this).val();  
$(this).focus(function(){  
if(txt === $(this).val()) $(this).val("");  
}).blur(function(){  
if($(this).val() == "") $(this).val(txt);  
});  
})  








法二：


首先，给你的每个表单项（Input, Textarea, Select ...按钮可除外）外套一个元素。


注意保持这个元素名相同。建议使用ul, li。








<form name="form1" id="form1" method="post">  
<ul>  
<li><input type="text" name="username" id="username"/></li>  
<li><input type="text" name="password" id="password"/></li>  
</ul>  
<input type="submit" value="提交"/>  
</form>  




然后，在表单元素左右（同一个标签内）插入一个LABEL标签，输入提示文字信息。








<form name="form1" id="form1" method="post">  
<ul>  
<li>  
<input type="text" name="username" id="username"/>  
<label for="username">用户名</label>  
</li>  
<li>  
<input type="text" name="password" id="password"/>  
<label for="password">密码</label>  
</li>  
</ul>  
<input type="submit" value="提交"/>  
</form>  




接着，用CSS给LABEL绝对定位到INPUT的上方，并为之加上:focus伪类，用LEFT值控制LABEL的显示。


--参考CSS代码：








#form1 UL LI  
{  
position:relative;  
padding:0em 0px 0em 0px;  /*去掉li默认空白边*/  
}  
#form1 UL LI LABEL  
{  
position:absolute;  
top:0px;  
left:0px;  
}  
#form1 UL LI INPUT:focus + LABEL  
{  
left:-9999px;   /*给LABEL赋一个很大的LEFT值，使之从你视野消失，display:none;也可以*/  
}  




然后，加一条CSS，控制表单项内容不为空时LABEL不显示。








#form1 UL LI .notempty + LABEL  
{  
left:-9999px;  
}  




最后，用jQuery判断表单元素失焦时内容是否为空。为空则为该元素加上上面添加的class名称即可。当然不要忘了，如果内容被用户清空时要去掉这个class哦！








var form = $('#form1');  
form.delegate('INPUT',"change",function(){  
if($(this).val()!==""){  
if(!$(this).hasClass("notempty")) $(this).addClass("notempty");  
}  
else{$(this).removeClass("notempty")}  
});  




此处我使用了change事件，当然blur事件也是完全可以做到。