密码框后的小眼睛怎么写？

 问题：项目过程中密码框自带的小眼睛时有时无，输入密码后鼠标移动到其他地方点击一下再移回来，小眼睛消失，无法查看明文密码

解决方法：自己写一个小眼睛定位到input框后。

        1.定义两个input框，类型分别为text（明文密码）和password（暗文密码），ng-if 来判断当前哪个框隐藏/显示 

         2.input框后定义一个小眼睛的图标，点击事件结合样式控制显示睁眼还是闭眼

 

Angular写法

HTML代码：

<div class="item" ng-init="pswShow = false">
    <span>
        <input type="text" class="text inline-block" ng-model="params.szPassword" ng-if="pswShow"/>
        <input type="password" class="text inline-block" ng-model="params.szPassword" ng-if="!pswShow"/>
        <span class="eye" ng-class="{true: 'open', false: 'close'}[pswShow]" ng-click="pswShow=!pswShow"></span>
    </span>
</div>

CSS代码：

.eye{
  width: 16px;
  height: 14px;
  position: absolute;
  display: inline-block;
  cursor: pointer;
  left: 328px;
  top: 127px;
}
.eye.close {
  background: url(../images/pigsney-close.png) center center no-repeat;
}
.eye.open {
  background: url(../images/pigsney-open.png) center center no-repeat;
  background-color: #FFFFFF
}