&lt;&lt;鋒利的jQuery&gt;&gt;樣例改進利用,html文本輸入框得到與失去輸入焦點的提示信息顯示切換函數

2024-04-27 15:02:02

字體：大中小

來源：轉載

供稿：網友

該書第二版3.2.10一節中,介紹val()方法時,所用的樣例代碼是有共性的,而且該樣例的場景模式在實際工作中會用到,所以試著優化了一下,寫了一個html文本輸入框得到與失去輸入焦點的提示信息顯示切換函數.
原書代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>3-10-2-2</title> <!--   引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script type="text/Javascript"> //<![CDATA[  $(function(){      $("#address").focus(function(){         // 地址框獲得鼠標焦點            var txt_value =  $(this).val();   // 得到當前文本框的值            if(txt_value==this.defaultValue){                  $(this).val("");              // 如果符合條件，則清空文本框內容            }       });      $("#address").blur(function(){          // 地址框失去鼠標焦點              var txt_value =  $(this).val();   // 得到當前文本框的值            if(txt_value==""){                $(this).val(this.defaultValue);// 如果符合條件，則設置內容            }       })      $("#passWord").focus(function(){            var txt_value =  $(this).val();            if(txt_value==this.defaultValue){                $(this).val("");            }       });      $("#password").blur(function(){              var txt_value =  $(this).val();            if(txt_value==""){                $(this).val(this.defaultValue);            }       })  });  //]]>  </script></head><body>    <input type="text" id="address" value="請輸入郵箱地址"/>   <br/><br/>    <input type="text" id="password" value="請輸入郵箱密碼"/>  <br/><br/>    <input type="button" value="登錄"/></body></html>

將其中的JavaScript代碼改為如下部分:

 <script type="text/javascript"> //<![CDATA[  $(function(){    var toggleInputTipOnFocusBlur = function(event){         // 文本框獲得鼠標焦點            if(event.type=="focus" && $(this).val()==this.defaultValue){          $(this).val("");              // 如果符合輸入框內容為提示信息的條件，則清空文本框內容            }      else if(event.type=="blur" && $(this).val()==""){        $(this).val(this.defaultValue);// 如果符合輸入內容為空的條件，則設置內容            }      };    $("#address").focus(toggleInputTipOnFocusBlur).blur(toggleInputTipOnFocusBlur);    $("#password").focus(toggleInputTipOnFocusBlur).blur(toggleInputTipOnFocusBlur);  });  //]]>  </script>