使用JS切换密码框显示与隐藏状态

“JS实现密码框的显示密码和隐藏密码功能示例” 在网页开发中，用户输入密码时通常会使用密码框（input type="password"），以保护用户的隐私信息不被他人窥探。然而，有时为了调试或验证输入的密码，开发者和用户可能需要查看明文密码。这个示例展示了如何使用JavaScript来实现在密码框中切换显示密码和隐藏密码的功能。 在这个示例中，主要涉及了JavaScript对HTML页面中的form表单元素进行动态操作的技术。通过监听点击事件，改变密码输入框的type属性，从而在“password”（隐藏密码）和“text”（显示密码）之间切换。 首先，HTML部分创建了一个密码输入框和一个链接，用于触发显示和隐藏密码的操作： ```html <form method="POST" action="" name="forms"> <span id="box"><input type="password" name="password" size="80" style="width:150;" value="sina.com"></span> <span id="click"><a href="javascript:showps()">显示密码</a></span> </form> ``` JavaScript部分定义了两个函数：`showps()` 和 `hideps()`。当用户点击“显示密码”链接时，`showps()` 函数会被调用： ```javascript function showps() { if (this.forms.password.type === "password") { document.getElementById("box").innerHTML = "<input type=\"text\" name=\"password\" size=\"80\" style='width:\"150\";' value=" + this.forms.password.value + ">"; document.getElementById("click").innerHTML = "<a href=\"javascript:hideps()\">隐藏密码</a>"; } } ``` 这个函数检查当前密码框的type是否为“password”。如果是，它会更新`<span id="box">`内的HTML，将输入框类型改为“text”，并更新链接文本为“隐藏密码”。 相反，当用户点击“隐藏密码”链接时，`hideps()` 函数会被调用： ```javascript function hideps() { if (this.forms.password.type === "text") { document.getElementById("box").innerHTML = "<input type=\"password\" name=\"password\" size=\"80\" style='width:\"150\";' value=" + this.forms.password.value + ">"; document.getElementById("click").innerHTML = "<a href=\"javascript:showps()\">显示密码</a>"; } } ``` 这个函数同样检查密码框的type，如果为“text”，则恢复成“password”类型，并将链接文本改回“显示密码”。 整个示例的核心在于JavaScript对DOM元素的动态操作，通过改变HTML元素的属性和内容，实现了在密码显示与隐藏之间的切换。这种功能在现代网页应用中很常见，可以提升用户体验，同时确保在默认状态下密码的安全性。