法一:

加入以下jQuery代码

  1. var txt=[];  
  2. var textbox=$(‘input:text’);  
  3. textbox.each(function(){  
  4. txt.push($(this).val());  
  5. });  
  6. textbox.focus(function(){  
  7. $(this).val(“”);  
  8. });  
  9. textbox.blur(function(){  
  10. if($(this).val()== “”){  
  11. var recover=txt[textbox.index($(this))];  
  12. $(this).val(recover);  
  13. }});   

改良版:(2012-2-24添加)

  1. $(‘input:text’).each(function(){  
  2. var txt = $(this).val();  
  3. $(this).focus(function(){  
  4. if(txt === $(this).val()) $(this).val(“”);  
  5. }).blur(function(){  
  6. if($(this).val() == “”) $(this).val(txt);  
  7. });  
  8. })  

 

法二:

首先,给你的每个表单项(Input, Textarea, Select …按钮可除外)外套一个元素。

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

  1. <form name=“form1” id=“form1” method=“post”>  
  2. <ul>  
  3. <li><input type=“text” name=“username” id=“username”/></li>  
  4. <li><input type=“text” name=“password” id=“password”/></li>  
  5. </ul>  
  6. <input type=“submit” value=“提交”/>  
  7. </form>  

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

  1. <form name=“form1” id=“form1” method=“post”>  
  2. <ul>  
  3. <li>  
  4. <input type=“text” name=“username” id=“username”/>  
  5. <label for=“username”>用户名</label>  
  6. </li>  
  7. <li>  
  8. <input type=“text” name=“password” id=“password”/>  
  9. <label for=“password”>密码</label>  
  10. </li>  
  11. </ul>  
  12. <input type=“submit” value=“提交”/>  
  13. </form>  

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

–参考CSS代码:

  1. #form1 UL LI  
  2. {  
  3. position:relative;  
  4. padding:0em 0px 0em 0px;  /*去掉li默认空白边*/  
  5. }  
  6. #form1 UL LI LABEL  
  7. {  
  8. position:absolute;  
  9. top:0px;  
  10. left:0px;  
  11. }  
  12. #form1 UL LI INPUT:focus + LABEL  
  13. {  
  14. left:-9999px;   /*给LABEL赋一个很大的LEFT值,使之从你视野消失,display:none;也可以*/  
  15. }  

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

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

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

  1. var form = $(‘#form1’);  
  2. form.delegate(‘INPUT’,“change”,function(){  
  3. if($(this).val()!==“”){  
  4. if(!$(this).hasClass(“notempty”)) $(this).addClass(“notempty”);  
  5. }  
  6. else{$(this).removeClass(“notempty”)}  
  7. });  

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