密码框后的小眼睛怎么写?
<div class="item" ng-init="pswShow = false"><span><input type="text" class="text inline-block" ng-model="oParams.szPassword" ng-if="pswShow"/><input type="password" class="text in
·
问题:项目过程中密码框自带的小眼睛时有时无,输入密码后鼠标移动到其他地方点击一下再移回来,小眼睛消失,无法查看明文密码
解决方法:自己写一个小眼睛定位到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
}
更多推荐
所有评论(0)