js实现显示和隐藏密码

可以通过操作 input 元素的 type 属性来实现显示和隐藏密码。

当 type 属性的值为 "password" 的时候，输入框会显示为密码框，输入的内容会被隐藏；当 type 属性的值为 "text" 的时候，输入框会显示为文本框，输入的内容会被显示。

通过添加一个 checkbox 元素，当 checkbox 被选中时，将 input 的 type 属性设置为 "text"，当 checkbox 没有被选中时，将 input 的 type 属性设置为 "password"，就可以实现显示和隐藏密码的功能。

示例代码如下：

HTML

<label>
  <input type="checkbox" id="show-password">显示密码
</label>
<br>
<input type="password" id="password">

JS

var checkbox = document.getElementById("show-password");
var passwordInput = document.getElementById("password");

checkbox.addEventListener("change", function() {
  if (checkbox.checked) {
    passwordInput.type = "text";
  } else {
    passwordInput.type = "password";
  }
});

在这个示例中，当 checkbox 被选中时，passwordInput 的 type 属性会被设置为 "text"，从而显示密码；当 checkbox 没有被选中时，passwordInput 的 type 属性会被设置为 "password"，从而隐藏密码。