1、需求背景

　　在设置密码信息时，需要支持输入内容的隐藏和可见的切换，效果如下：

　　隐藏：

　　显示：

2、实现原理：

　　1. 设置两个input，一个type为password，一个type为text，分别用于显示隐藏密码和可见密码

　　2. 设置两个字体图标，一个为睁开的眼睛，一个为闭上的眼睛，用于点击切换两个input的显示，当然，图标的样式可以任意定义

　　3. 保证两个input的值相同

3、代码实现：

　　1. html

密码:
<input type="password" class="input-password1" name="password1" id="password1" />
<input type="text" class="input-password2" name="password2" id="password2" />
<i class="fa fa-eye-open" id="togglePassword"></i>

2. css

/* 设置眼睛图标的样式 */
.fa{
  width: 24px;
  height:24px;
  cursor: pointer;
  margin-left: -30px; /* 将眼睛图标放在input框中 */
}
.input-password2{
  display: none; /* 初始状态隐藏第二个input框 */
}
/* 隐藏掉ie中默认实现的眼睛 */
.input-password1::-ms-reveal {
  display: none;
}
/* 隐藏掉ie中默认实现的x号 */
.input-password2::-ms-clear {
  display: none;
}

3. js

<script type="text/javascript">
  // 监听切换显示与隐藏的点击事件
  $('#togglePassword').click(function() {
    if ($(this).hasClass('fa-eye-open' )) {
      $('#password1').hide();
      $('#password2').show();
      $(this).removeClass('fa-eye-open').addClass('fa-eye-close');
    } else {
      $('#password1').show();
      $('#password2').hide();
      $(this).removeClass('fa-eye-close').addClass('fa-eye-open');
    }
  });
  
  // 监听两个input值的change事件，修改另一个input的值，保证二者一致
  $('#password1').change(function() {
    $('#password2').val($(this).val());
  });
  $('#password2').change(function() {
    $('#password1').val($(this).val());
  });
</script>

4、注意事项：

　　a、本文代码使用了jquery，需引入；使用了字体图标，需引入；

　　b、IE中默认对type为password的input设置了眼睛图标用于显示密码，对type为text的input设置了×号图标用于清除内容，本文将其设置为隐藏，保证浏览器兼容性；

　　c、因为两个input保存的值是一致的，因此在校验和提交表单时，只需处理其中一个即可。

其他方法：

为什么要用隐藏接收他的密码呢，哪用这么复杂！？直接用jquery改变密码输入框的type属性为text啊，源码如下：

if ($("#pwd").attr("type") == "password")
{
  $("#pwd").attr("type", "text");
} else {
  $("#pwd").attr("type", "password");
}