jquery中密码添加小眼睛，密文/明文显示

jquery中密码添加小眼睛，密文/明文显示

• 如下图所示
  （1）初始化及鼠标松开效果：密文 + 小眼睛灰色（主要是onmouseup事件 及 初始化）
  
  （2）鼠标点击时效果：明文 + 小眼睛绿色（主要是onmousedown事件）
  

• 配置条件
  （1）jquery.min.js
  （2）bootstrap.min.js 需要在项目中是完整的包，如下图
  
  (3)注意bootstrap4.0.0以下，因为小眼睛我是用的bootstrap的字体图表，bootstrap4.0.0已经不含有字体图表了，如果需要，可从bootstrap3.3.7中复制

• 实际代码
  （1）html文件中代码

 <div class='row password-eye-div'>
      <sapn class='col-lg-3 col-md-3 text-right'><span style="color:red;">*&nbsp;</span>密码</sapn>
      <input class="alarmPageTime col-lg-9 col-md-9 bg-transparent" id="user-add-password" name="SN" type="password"
             placeholder="字母＋数字 8至15位,不能包含'空格'">
      <span class="glyphicon glyphicon-eye-close form-control-feedback password-eye-span" 
            onmousedown="userPasswordEye('user-add-password', 'onmousedown')"  
            onmouseup="userPasswordEye('user-add-password', 'onmouseup')"></span>
 </div>

几个关键点如下：
a) 红色框样式类名为了定位小眼睛在密码这一行
b) 黄色框样式类名是引用bootstrap小眼睛字体图标
c) id是获取输入文本，type="password"是密文，type="text"是明文
d) onmousedown鼠标点击下去的事件，onmouseup鼠标松开的事件

(2) js文件中代码

 function userPasswordEye(name, type) {
    let id = "#" + name;
    let typeValue = '';
    if(type === 'onmousedown') {
        $(id).siblings(".password-eye-span").css("color", "#00FEBF");
        typeValue = 'text'; // 明文显示
    } else {
        $(id).siblings(".password-eye-span").css("color", "#ccc");
        typeValue = 'password'; // 密文显示
    }
    $(id).attr("type", typeValue);
}

（3）css文件中代码

 .password-eye-div {
    position: relative;
}

.password-eye-span {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    color: #ccc;
}

• - - - - - - 后语 - - - - - -
  欢迎大家评论，相互学习，
  不足之处，请指教哈！