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