如何在 JavaScript 中切换密码可见性？

在Web开发中，密码框一般默认为不可见状态，也就是输入的密码以星号或圆点等符号代替显示。但有时候需要将密码显示出来，以便用户核对输入正确性或查看密码是否输入正确。在JavaScript中，可以很方便地实现密码可见性的切换。

方法一：使用input的type属性

最简单的方法是通过input标签的type属性来实现密码可见性的切换。将type属性值切换为"text"可以使密码可见，切换为"password"可以使密码不可见。

示例代码如下：

<input type="password" id="passwordInput">
<button onclick="toggleVisibility()">切换密码可见性</button>

<script>
function toggleVisibility() {
  var passwordInput = document.getElementById("passwordInput");
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
  } else {
    passwordInput.type = "password";
  }
}
</script>

代码解释：

• HTML部分：创建一个密码框及一个按钮，通过按钮的点击事件调用toggleVisibility函数。
• JavaScript部分：根据密码框的type属性值来判断当前密码是否可见，若当前密码不可见，则将type属性值改为"text"，使密码可见，反之则改为"password"，使密码不可见。

方法二：使用CSS控制样式

另一种方法是使用CSS来控制密码框的样式，通过添加/删除CSS样式类来实现密码的可见性切换。

首先，在CSS文件中定义两个样式类：

.visible-password {
  -webkit-text-security: none !important;
  text-security: none !important;
}

.hidden-password {
  -webkit-text-security: disc !important;
  text-security: disc !important;
}

其中，-webkit-text-security和text-security属性可以控制密码框输入时的显示样式，"none"表示非加密模式，"disc"表示加密模式。

然后，在JavaScript中定义toggleVisibility函数，通过对密码框添加/删除样式类来实现密码可见性切换。示例代码如下：

<input type="password" id="passwordInput">
<button onclick="toggleVisibility()">切换密码可见性</button>

<script>
function toggleVisibility() {
  var passwordInput = document.getElementById("passwordInput");
  if (passwordInput.classList.contains("visible-password")) {
    passwordInput.classList.remove("visible-password");
    passwordInput.classList.add("hidden-password");
  } else {
    passwordInput.classList.remove("hidden-password");
    passwordInput.classList.add("visible-password");
  }
}
</script>

代码解释：

• HTML部分：创建一个密码框及一个按钮，通过按钮的点击事件调用toggleVisibility函数。
• CSS部分：定义两个样式类，分别用于可见和不可见状态的密码框样式。
• JavaScript部分：根据密码框是否包含"visible-password"样式类来判断密码是否可见，若可见则将"visible-password"类删除，添加"hidden-password"类，反之则删除"hidden-password"类，添加"visible-password"类。

总结

以上两种方法均可实现JavaScript中密码可见性的切换。方法一简单直接，但不够灵活；方法二需要CSS的支持，比较灵活，适用于多种样式需求。开发者可以根据具体需求选择使用。