今天我们要写的是一个常用的小案例，密码隐藏与显示
样式如下：
input 标签的密码框自带有隐藏密码的功能，这篇文章就当做隐藏密码的内部实现机制吧......（而且我不知道如何去除 input 自带的隐藏密码图标，有会的大佬留个言呗！！）
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{ background-color: rgb(204, 204, 204); } #divout{box-sizing: border-box; position: absolute; top: 50%; left: 50%; margin-left:-216px; margin-top: -160px; display: inline-block; width: 450px; height: 180px; background-color: rgb(204, 204, 204); } #divout #div1{box-sizing: border-box; display: inline-block; width: 450px; height: 55px; background-color: rgb(255, 255, 255); border-bottom:3pxsolid; border-color: rgb(109, 109, 109) ; background-color: rgb(204, 204, 204); padding-left: 10px; padding-top: 5px; } #divout #div2{box-sizing: border-box; display: inline-block; width: 450px; height: 70px; background-color: rgb(204, 204, 204); } #divout #div3{box-sizing: border-box; display: inline-block; width: 450px; height: 55px; background-color: rgb(255, 255, 255); border-bottom:3pxsolid; border-color: rgb(109, 109, 109) ; background-color: rgb(204, 204, 204); padding-left: 10px; padding-top: 5px; } #text1{height: 44px; width: 360px; border: 0; outline: none; font-size: 24px; background-color: rgb(204, 204, 204); color: rgb(109, 109, 109) ; } #pwd{height: 44px; width: 360px; border: 0; outline: none; font-size: 24px; background-color: rgb(204, 204, 204); color: rgb(109, 109, 109) ; } img{ position:absolute; right: 19px; top: 145px; width: 30px; height: 30px; } </style></head><body><divid="divout"><divid="div1"><inputtype="text"id="text1"placeholder="请输入用户名"></div><divid="div2"></div><divid="div3"><label><imgsrc="./登录/密码隐藏 (2).png"alt=""id="img1"></label><inputtype="password"id="pwd"autocomplete="off"placeholder="请输入密码"></div></div><script>varpwd=document.getElementById('pwd'); varimg=document.getElementById('img1'); varflag=0; img.onclick=function(){ if(flag==0){ pwd.type="text"; img.src="./登录/密码显示.png"; flag=1; }else{ pwd.type="password"; img.src="./登录/密码隐藏 (2).png"; flag=0; } } </script></body></html>改进代码：增加了密码输入对错提示<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{ background-color: rgb(204, 204, 204); } #divout{box-sizing: border-box; position: absolute; top: 50%; left: 50%; margin-left:-216px; margin-top: -160px; display: inline-block; width: 450px; height: 180px; background-color: rgb(204, 204, 204); } #divout #div1{box-sizing: border-box; display: inline-block; width: 450px; height: 55px; background-color: rgb(255, 255, 255); border-bottom:3pxsolid; border-color: rgb(109, 109, 109) ; background-color: rgb(204, 204, 204); padding-left: 10px; padding-top: 5px; } #divout #div2{box-sizing: border-box; display: inline-block; width: 450px; height: 70px; background-color: rgb(204, 204, 204); } #divout #div3{box-sizing: border-box; display: inline-block; width: 450px; height: 55px; background-color: rgb(255, 255, 255); border-bottom:3pxsolid; border-color: rgb(109, 109, 109) ; background-color: rgb(204, 204, 204); padding-left: 10px; padding-top: 5px; } #text1{height: 44px; width: 360px; border: 0; outline: none; font-size: 24px; background-color: rgb(204, 204, 204); color: rgb(109, 109, 109) ; } #pwd{height: 44px; width: 360px; border: 0; outline: none; font-size: 24px; background-color: rgb(204, 204, 204); color: rgb(109, 109, 109) ; } img{ position:absolute; right: 19px; top: 145px; width: 30px; height: 30px; } #yn{box-sizing: border-box; position:absolute; right: 50px; top: 400px; width: 400px; height: 60px; } .message{ background:url(./登录/正确.png) no-repeatleftcenter ; background-size: 5%100%; padding-left: 25px; font-weight: bold; color: rgb(68, 68, 68); display: none; } .wrong{ background: url(./登录/错误空心.png) no-repeatleftcenter; background-size: 5%100%; color: brown; } .right{ background: url(./登录/正确.png) no-repeatleftcenter; background-size: 5%100%; color: rgb(6, 189, 46); } </style></head><body><divid="divout"><divid="div1"><inputtype="text"id="text1"placeholder="请输入用户名"></div><divid="div2"></div><divid="div3"><label><imgsrc="./登录/密码隐藏 (2).png"alt=""id="img1"></label><inputtype="password"id="pwd"autocomplete="off"placeholder="请输入密码"></div></div><divid="yn"><pclass="message">请输入正确的6-16位的密码</p></div><script>varpwd=document.getElementById('pwd'); varimg=document.getElementById('img1'); varmes=document.querySelector('.message'); pwd.onfocus=function(){ mes.style.display='block'; } pwd.onblur=function(){ if(pwd.value.length<6||pwd.value.length>16){ mes.className='message wrong'; mes.innerHTML='请输入正确的符合要求的密码'; }else{ mes.className='message right'; mes.innerHTML='符合要求' } } varflag=0; img.onclick=function(){ if(flag==0){ pwd.type="text"; img.src="./登录/密码显示.png"; flag=1; }else{ pwd.type="password"; img.src="./登录/密码隐藏 (2).png"; flag=0; } } </script></body></html>
