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