本文介绍如何利用JavaScript实现密码输入框的显示与隐藏切换功能。通过HTML结构搭建、CSS样式定位以及JS监听点击事件修改input的type属性，实现用户点击图标切换明文与密文显示的效果。
密码显示与隐藏功能实现
为了保障网站安全，许多用户倾向于设置复杂的密码。然而，如果密码以圆点或星号形式隐藏显示，用户难以确认输入是否正确。为了解决这一问题，可以通过JavaScript实现密码可见性切换功能，让用户点击按钮即可查看明文。下面先展示最终效果。
首先构建界面结构，创建一个名为pass-box的外层容器，内部包含一个input输入框和一个i标签，并分别为它们添加相应的class名称。
<div class="pass-box">
<input type="password" name="pass" />
<i state="off"></i>
</div>接下来为对应的class添加样式属性。为了使i标签位于input上方，需要给i设置position属性，并调整其top和right值以定位。同时设定其宽度和高度，并配置背景图片。
.pass-box {
width: 300px;
margin: 30px auto;
position: relative;
}
.pass-box input {
border: #cccccc 1px solid;
background-color: #fff;
color: #666;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.pass-box i{
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
right: 5px;
top:5px;
background-image: none;
background-size: 200% 200%;
background-position: center;
}界面效果完成后，为i标签添加点击事件。在HTML结构中，我们给i标签设置了一个state状态属性，用于判断用户的两次点击效果。第一次点击时密码显示，第二次点击时密码隐藏，如此循环。利用这个state属性来查看当前状态。
核心逻辑在于修改input的type属性：显示时type为text，隐藏时type为password。因此，JavaScript的逻辑处理相对清晰。
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实现表单密码隐藏与显示的全部内容，希望对大家有所帮助！