密碼框提示文字程式碼例項

admin發表於2017-03-01
密碼
為了讓表單輸入更加人性化，一般都會設有提示內容，比如在文字框內容預設有“請輸入姓名”類似的提示，但是在密碼框中實現起來就沒有那麼輕鬆了，因為密碼框中的內容並不是明文顯示的，下面就介紹一下如何實現提示效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>密碼框提示語-螞蟻部落</title>
<style type="text/css">
ul{list-style:none}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $(".text_login").focus(function(){ 
    if($(this).val()=='輸入姓名'||$(this).val()=='輸入密碼'){ 
      $(this).val(''); 
    } 
    if($(this).attr('id')=='password1'){ 
      $(this).hide(); 
      $('#password2').show(); 
      $('#password2').focus(); 
    } 
  }); 
  $(".text_login").blur(function(){ 
    if($(this).attr('id')=='password2'&&$(this).val()==''){ 
      $(this).hide(); 
      $('#password1').show(); 
      $('#password1').val('輸入密碼'); 
    } 
    else if($(this).attr('id')=='uname'&&$(this).val()==''){ 
      $(this).val('輸入姓名'); 
    } 
  }); 
}); 
</script> 
</head>
<body> 
<ul class="tb_login">
  <li>姓名:
   <input type="text" value="輸入姓名" id="uname" class="text_login"/>
  </li>
  <li>密碼:
   <input type="password" id="password2" style="display:none;" class="text_login"/>
   <input type="text" value="輸入密碼" id="password1" class="text_login"/>
  </li>
</ul>
</body> 
</html>

以上程式碼實現了我們的要求，在預設條件下，無論是文字框還是密碼框，都會有明文提示語，當點選文字框和密碼框的時候，能夠清除提示語，下面簡單介紹一下實現過程。

一.實現原理:

原理比較簡單，關於文字框這裡就不介紹了。密碼框之所以實現了明文提示效果，主要是採用了替換的方式，在預設情況下，密碼框是隱藏的，取而代之的是一個文字框，此文字框中含有提示語，當點選文字框的時候，此文字框隱藏，轉而顯示密碼框，原理大致如此。

二.程式碼註釋:

1.$(document).ready(function(){ })，當文件結構完全載入完畢再去執行函式中的程式碼。

2.$(".text_login").focus(function(){}），為class屬性值為text_login元素註冊focus事件處理函式。

3.if($(this).val()=='輸入姓名'||$(this).val()=='輸入密碼')，如果文字框的value值為"輸入姓名"或者"輸入密碼"。

4.$(this).val('')，將value值清空。

5.f($(this).attr('id')=='password1')，如果id屬性值為password1。

6.$(this).hide()，隱藏當前文字框。

7.$('#password2').show()，將密碼框顯示。

8.$('#password2').focus()，使密碼框獲得焦點。

9.$(".text_login").blur(function(){}），為class屬性值為text_login元素註冊blur事件處理函式。

10.if($(this).attr('id')=='password2'&&$(this).val()=='')，如果id屬性值為'password2'（也就是密碼框）且value屬性值為空。

11.$(this).hide()，隱藏密碼框。

12.$('#password1').show(),顯示替代文字框。

13.$('#password1').val('輸入密碼')，設定替代文字框的value屬性值。

14.else if($(this).attr('id')=='uname'&&$(this).val()=='')，如果id屬性值為uname且value屬性值為空。

15.$(this).val('輸入姓名')，設定文字框的value屬性值。

三.相關閱讀:

1.focus事件可以參閱jQuery focus事件一章節。

2.val()函式可以參閱jQuery val()方法一章節。

3.attr()函式可以參閱jQuery attr()方法一章節。

4.blur事件可以參閱jQuery blur事件一章節。

相關文章