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

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

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

密码框后的小眼睛怎么写？相关推荐

android密码框右侧显示小眼睛
不知道为什么android 资料好少啊,一艘都2012-2015年的居多....这是为什么呢? 实现效果 <?xml version="1.0" encoding=" ...
css去掉ie浏览器输入框后面的小叉叉，和密码框后面的小眼睛
css代码里面放入这个就可以了 ::-ms-clear, ::-ms-reveal{display: none;}
JS(JavaScript)入门设置密码框中点击小眼睛显示隐藏所输入的密码！
表单中点击小眼睛显示隐藏密码框中的密码! 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 网站链接 https://www.iconfont.cn/ 最终效果图 ...
input如何显示密码隐藏密码，点击小眼睛显示隐藏密码
目录一.如何单纯的在密码框显示密码二.如何在密码框里面显示并可以隐藏密码三.代码展示四.结果展示一.如何单纯的在密码框显示密码单纯显示密码可以吧type里面的值改成text,如果要隐藏 ...
小眼睛适合大框还是小框眼镜_小眼睛合适什么眼镜框这个禁忌千万不要犯
小眼睛适合什么眼镜框许多天生眼睛偏小的人,都会想尽方法来让自己的眼睛看起来更大,而佩戴眼镜就是其中对比多见的方式.但佩戴眼镜也是需要讲究诀窍的,那么,小眼睛的人应该如何挑选眼镜呢? 对于现代的年轻男 ...
html密码框怎么添加小图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 方法一将小图标当做input的背景来插入,直接上代码吧: *{ margin: 0; padding: 0 ...
js和jq实现点击小眼睛后密码显示与隐藏切换
效果(要求) 眼睛的图标这里是使用了阿里巴巴图标库的图标. js实现 <!DOCTYPE html> <html lang="en"><head> ...
解决IE 自带的密码框小眼睛与输入框X符号
input::-ms-clear{display:none;}/*删除文本框中的叉号*/ input::-ms-reveal{display:none;} /*删除密码框中的小眼睛*/ 注:使用inp ...
【解决方案】element show-password弹框关闭如何将小眼睛还原
背景描述因为我们的密码输入框是放在弹出框里的,element show-password 在弹框里打开小眼睛,关闭弹框,再打开小眼睛仍开着,感觉比较尴尬,如下: 问题: 打开小眼睛后,不刷新页面下一 ...

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

密码框后的小眼睛怎么写？相关推荐

最新文章

热门文章