为了网站的安全，很多朋友设置的密码比较复杂，但是密码怎么可能显示不清楚，也不知道输入的是对是错，但是为了安全可以显示密码，那么基于js代码怎么实现呢？当用户输入时，密码显示为点或星号。为确保用户输入正确，用户可以点击按钮显示密码。先看节目效果就好。

接口，一个外部传递框，然后在内层添加输入和一个I标记，并向它们添加相应的类名。

Class=' pass-box '输入类型=' password ' name=' pass '/I state=' off '/I/div现在我们给相应的类添加相应的属性值。在这个框中，我需要在输入上方，所以我需要被赋予一个位置属性，然后调整它的顶部和右侧。然后，我们设置它的宽度和高度，并设置它的背景图片。传递盒{ width: 300pxmargin: 30px自动；相对位置：}.传递盒输入{ border: # cccccc 1px solid背景-color : # fff；color: # 666padding: 10px宽度： 100%；盒子尺寸：边框盒子；}.传递框I { display : inline-block；宽度： 30px；height: 30px绝对位置：right: 5pxtop:5px背景-image:无；背景尺寸： 200% 200%；背景-位置：中心；}这样就完成了界面效果。然后给I添加一个点击事件，在HTML结构中，我们给I一个状态，主要用来判断用户的点击效果两次。第一次点击，会显示密码。第二次点击，密码被隐藏。重复这个动作。所以用这个状态来检查它的状态。

重点是修改输入的类型属性，使类型显示时为文本，隐藏时为密码。所以JS的逻辑处理是比较清晰的。

var ele _ pass _ box=document . getelementsbytagname(' div ')[0]；var ele _ pass=ele _ pass _ box . getelementsbytagname(' input ')[0]；var ele _ eye=ele _ pass _ box . getelementsbytagname(' I ')[0]；ele _ eye . onclick=function(){ var state=this . GetAttribute(' state ')；if(state===' off '){ ele _ pass . SetAttribute(' type '，' text ')；ele_eye.setAttribute('state '，' on ')；ele _ eye . style . opacity=0.2；} else { ele _ pass . SetAttribute(' type '，' password ')；ele_eye.setAttribute('state '，' off ')；ele _ eye . style . opacity=1；}}这是逻辑代码，不多。测试的时候要注意细节。

以上就是边肖分享的基于JavaScript隐藏显示表单密码的全部内容。希望对大家有帮助！