首页js点击输入框按钮显示隐藏密码

js点击输入框按钮显示隐藏密码

时间: 2024-10-18 13:07:10 浏览: 29

在JavaScript中，你可以通过给input元素添加事件监听器来实现点击特定按钮时切换密码字段的可见状态。这里是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>点击按钮显示/隐藏密码</title> </head> <body> <input type="password" id="passwordField" placeholder="请输入密码"> <button onclick="togglePasswordVisibility()">显示/隐藏密码</button> <script> function togglePasswordVisibility() { var passwordField = document.getElementById("passwordField"); if (passwordField.type === "password") { passwordField.type = "text"; // 显示密码 buttonText = "隐藏密码"; } else { passwordField.type = "password"; // 隐藏密码 buttonText = "显示密码"; } document.querySelector('button').innerText = buttonText; } </script> </body> </html> ``` 在这个示例中，当点击按钮时，`togglePasswordVisibility`函数会被触发。它会获取id为"passwordField"的input元素，并检查其type属性。如果当前是password类型，就将其改为text（显示明文），同时更新按钮文本；反之则恢复为password类型（隐藏）。按钮的文字也会随着密码状态的变化而相应改变。

阅读全文