首页 > 其他分享> 文章详细

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

2021-08-04 11:00:55 阅读：390 来源： 互联网

标签：eye center 眼睛密码 background input 框后

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

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

标签：eye,center,眼睛,密码,background,input,框后
来源： https://blog.csdn.net/weixin_44427784/article/details/119354673

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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