JavaScript 如何切换密码可见性

如果您知道如何在JavaScript代码中设置密码，则很容易理解如何切换密码的可见性。

在本节中，我们将学习如何通过实例来切换 JavaScript 密码的可见性。

当我们在代码中使用密码字段时，可能很容易知道密码以’*’形式显示，这是用户输入隐藏在其后面的实际字符的安全输入。但有时，管理员可能会误输入密码，并假设密码被正确输入。但在登录尝试失败后，管理员希望查看密码字符串，以便了解自己的错误并避免重复。为了知道实际密码字符串，他将转到数据库。为了满足这一需求，切换密码可见性的概念可以帮助管理员在密码输入框中查看管理员是否正确输入了密码，而无需转到数据库并搜索密码。我们需要添加一个按钮，用于让用户切换密码的可见性。

切换密码可见性的步骤

为了切换密码的可见性，需要按照以下步骤：

第一步： 创建一个带有密码字段的输入元素，用于以密码形式输入。

第二步： 在输入元素中添加一个图标，用户可以单击该图标以切换密码的可见性。

第三步： 在图标上附加一个事件处理程序，如果用户单击图标，应该在密码字段的类型属性之间切换文本和密码。因此，当类型从密码更改为文本时，用户输入的实际文本将可见。

第四步： 当用户取消选中图标时，实际密码文本再次在密码形式中切换。

用户需要在代码中包含这些描述的步骤，并可以实现密码可见性的切换。

现在，让我们看一个示例代码，以更好地理解这些步骤。

在JavaScript中切换密码可见性

下面的示例代码显示了切换密码可见性所需的步骤的实现：

<!DOCTYPE html>
<html>
<head>
<title>JS Toggle Password Visibility</title>
</head>
Enter Password: <input type="password" value="javatpoint" id="pswrd">
<input type="checkbox" onclick="toggleVisibility()"/>Show Password</br>
<body>
<script>
function toggleVisibility() {
  var getPasword = document.getElementById("pswrd");
  if (getPasword.type === "password") {
    getPasword.type = "text";
  } else {
    getPasword.type = "password";
  }
}
</script>
</body>
</html>

上述代码的输出如下所示：

JavaScript 如何切换密码可见性