开发者社区安全文章正文

显示隐藏密码明文案例

2022-04-28 166

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 我们经常会见到很多网站在注册登录的时候,在密码一栏有一个眼睛一样的小图标,点一下可以显示密码,在点击一下又会隐藏密码,接下来我们就来实现这个功能.

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>.box {
position: relative;
width: 400px;
border-bottom: 1pxsolid#ccc;
margin: 100pxauto;
        }
.boxinput {
width: 370px;
height: 30px;
border: 0;
outline: none;
        }
.boximg {
position: absolute;
top: 2px;
right: 2px;
width: 24px;
        }
</style></head><body><divclass="box"><labelfor=""><imgsrc="images/close.png"alt=""id="eye"></label><inputtype="password"name=""id="pwd"></div><script>// 1. 获取元素vareye=document.getElementById('eye');
varpwd=document.getElementById('pwd');
// 2. 注册事件 处理程序varflag=0;
eye.onclick=function() {
// 点击一次之后， flag 一定要变化if (flag==0) {
pwd.type='text';
eye.src='images/open.png';
flag=1; // 赋值操作            } else {
pwd.type='password';
eye.src='images/close.png';
flag=0;
            }
        }
</script></body></html>