實現input密碼框顯示/隱藏的功能

如今不少地方的註冊都只有一個密碼框，而後再加個顯示/隱藏按鈕，這樣作很簡潔，不用再很繁瑣的輸入兩遍密碼，用戶能本身看到密碼輸入得對不對。因此幻幻也研究了一發實現方案：

1. 首先來個密碼框

1 2 3 4

<dd class= "password" >      <input name= ""  type= "password"  class= "n-txtCss"  placeholder= "請輸入您的密碼"  datatype= "*6-16"  errormsg= "密碼範圍在6~16位之間！"  nullmsg= "請輸入密碼！"  sucmsg= "&nbsp;"  maxlength= "16"  plugin= "passwordStrength" >      <i class= "fa fa-eye-slash" ></i> </dd>

2.CSS

讓顯示/隱藏按鈕放在密碼框的最右側

1 2 3 4 5 6 7 8 9 10 11 12 13

.password{      position :  relative ; } .password .n-txtCss{      width : 90%  !important ; } .password .fa{      position :  absolute ;      right :  10px ;      top : 15px ;      font-size :  20px ;      cursor :  pointer ; }

3.JS實現

1 2 3 4 5 6 7 8 9

$( ".password" ).on( "click" ,  ".fa-eye-slash" ,  function  () {      $( this ).removeClass( "fa-eye-slash" ).addClass( "fa-eye" );      $( this ).prev().attr( "type" ,  "text" ); });   $( ".password" ).on( "click" ,  ".fa-eye" ,  function  () {      $( this ).removeClass( "fa-eye" ).addClass( "fa-eye-slash" );      $( this ).prev().attr( "type" ,  "password" ); });

 

效果圖

轉自  ： https://www.reinforce.cn/t/569.html