密码框显示明文

样式代码如下:

注:

1.样式展示():
<ul>
   <li class="phone bgImg">
       <input type="text" id="phone" maxlength="11" placeholder="手机号"/>
   </li>
   <li class="password bgImg">
      <input type="password" id="password" maxlength="10" placeholder="6-10位数字&字母组合登录密码"/>
      <a href="#" id="passwordeye" class="invisible bgImg"></a>
   </li>
</ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

1).隐藏按钮css ,图片用webpack做了压缩,做了加密
ul li .invisible {
  background-image: url(data:image/png;base64,iVBORw0K);
  height: .5rem;
  top: .7rem;
2).显示按钮css
ul li .visible {
  background-image: url(data:image/png;base64,iVBORw0KG);
  height: .8rem;
  top: .55rem;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

2.显示隐藏对应的switchPwd()方法:
function switchPwd() {
   var passwordeye = $('#passwordeye');
   var showPwd = $("#password");
   passwordeye.off('click').on('click',function(){
       if(passwordeye.hasClass('invisible')){
           passwordeye.removeClass('invisible').addClass('visible');//密码可见
           showPwd.prop('type','text');
       }else{
           passwordeye.removeClass('visible').addClass('invisible');//密码不可见
           showPwd.prop('type','password');
       };
   });     
}