<<鋒利的jQuery>>樣例改進利用, html文本輸入框獲得與失去輸入焦點的提示信息顯示切換函數

時間 2019-12-01

標籤鋒利 jquery 樣例改進利用 html 文本輸入獲得失去焦點提示信息顯示切換函數欄目 JQuery 简体版

原文原文鏈接

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

<!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代碼改成以下部分:html

 <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>