明文顯示密碼效果詳解

admin發表於2018-11-23
密碼

密碼框中輸入的內容預設不會以明文顯示，可以提高安全性，不過也有不方便之處，不知道輸入的內容是否正確，為了解決這個問題，很多網站都在密碼框後面跟隨一個按鈕，點選以後就可以顯示密碼明文，下面就通過一段程式碼簡單介紹一下如何實現此功能。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>以明文顯示密碼框內容-螞蟻部落</title> 
<style type="text/css">
#passwd{
  ime-mode:disabled; 
  display: inline;
}
#passwd2{
  ime-mode:disabled; 
  display: none;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function(){ 
  $("#chk").bind({click:function(){ 
    if($(this).attr("checked")){ 
      $("#passwd2").val($("#passwd").val()); 
      $("#passwd").hide(); 
      $("#passwd2").show(); 
    }
    else{ 
      $("#passwd2").hide(); 
      $("#passwd").show(); 
    } 
  }}); 
}); 
</script> 
</head> 
<body> 
  <input id="passwd" type="password" size="24" maxlength="17" /> 
  <input id="passwd2" type="text" size="24" maxlength="17" /> 
  <input id="chk" type="checkbox" />顯示密碼 
</body> 
</html>

選中核取方塊可以顯示密碼明文，取消選中又以密碼形式顯示，下面介紹一下實現過程:

一.實現原理:

原理其實很簡單，其實並沒有真正的讓密碼框顯示明文，只是當輸入密碼的時候，將密碼框中的值賦值給另一個文字框，不過這時候文字框是隱藏的，當選中核取方塊的時候，真正的密碼框隱藏，文字框顯示，這樣就是實現了明文顯示的效果，當取消核取方塊選中的時候，再將文字框隱藏，密碼框顯示，原理就是如此。

二.程式碼註釋:

（1）.$(function(){})，當穩當結構載入完畢之後再來執行函式中的程式碼。

（2）.$("#chk").bind({click:function(){})，為核取方塊註冊click事件處理函式。

（3）.if($(this).attr("checked"))，判斷核取方塊是否被選中，如果被選中則返回checked。

（4）.$("#passwd2").val($("#passwd").val())，將密碼框的值賦值給文字框。

（5）.$("#passwd").hide()，將密碼框隱藏。

（6）.$("#passwd2").show()，將文字框顯示。

（7）.else{}，如果沒有被選中的話，就會執行大括號中的程式碼。

（8）.$("#passwd2").hide()，隱藏文字框。

（9）.$("#passwd").show()，顯示密碼框。

三.相關閱讀:

（1）.attr()參閱jQuery attr()方法一章節。

（2）.val()參閱jQuery val()方法一章節。

（3）.hide()參閱jQuery hide()方法一章節。

（4）.show()參閱jQuery show()方法一章節。

（5）.attr()和prop()區別參閱prop()方法和attr()方法的區別一章節。

相關文章