300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > js实现密码输入框点击小眼睛显示或隐藏密码

js实现密码输入框点击小眼睛显示或隐藏密码

时间:2021-01-27 13:31:37

相关推荐

js实现密码输入框点击小眼睛显示或隐藏密码

登录页密码框加密输入不知道对错,加个小眼睛方便查看和修改,下面是小眼睛效果图,如果不喜欢这个图标可以自己去阿里图标库自己选择下载。

html代码(因为只把密码输入框展示出来了,所以样式自行调整,只给你们展示功能代码)

<div class="login_ipt"><input class="pwd" id="pwd" type="password" placeholder="请输入密码"><img class="eye" id="eye" src="./images/eye.png" alt=""></div>

js代码

// 1.获取元素var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');// 2.注册事件 处理程序var flag = 0;eye.onclick = function () {// 点击一次之后,flag一定要变化if (flag == 0) {pwd.type = 'text';eye.src = './images/eye_active.png';flag = 1; //赋值操作} else {pwd.type = 'password';eye.src = './images/eye.png';flag = 0;}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。