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

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

解决方法:自己写一个小眼睛定位到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
}

猜你喜欢

转载自blog.csdn.net/weixin_44427784/article/details/119354673