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事件也是完全可以做到。