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