HTML 使用Javascript实现点击按钮显示/隐藏密码

在本文中，我们将介绍如何使用Javascript来实现点击按钮显示或隐藏密码的功能。通过这种方式，用户可以自由选择是否显示密码，增加了用户体验和安全性。

阅读更多：HTML 教程

HTML元素

首先，我们需要创建一个HTML文档。在HTML文档中，我们需要包含一个输入框和一个按钮，用于控制密码的显示和隐藏。

<input type="password" id="passwordInput">
<button id="toggleButton">显示/隐藏密码</button>

在上面的代码中，我们使用了<input>元素来创建一个密码输入框，并设置了type="password"，这会将输入框的内容隐藏为密码形式。我们还创建了一个<button>元素，用于触发切换密码显示和隐藏的功能。

Javascript实现

接下来，我们需要编写Javascript代码来实现点击按钮显示/隐藏密码的功能。我们可以使用事件监听器来监听按钮的点击事件，并在点击时修改输入框的类型，以实现密码显示和隐藏的切换。

var passwordInput = document.getElementById("passwordInput");
var toggleButton = document.getElementById("toggleButton");

toggleButton.addEventListener("click", function() {
  if (passwordInput.type === "password") {
    passwordInput.type = "text";
  } else {
    passwordInput.type = "password";
  }
});

在上面的代码中，我们首先使用document.getElementById()方法获取了输入框和按钮的引用。然后，我们通过调用addEventListener()方法，为按钮的点击事件绑定了一个回调函数。在回调函数中，我们检查输入框的类型，如果当前类型是password，则将其修改为text，即显示密码。如果当前类型是text，则修改为password，即隐藏密码。

示例

为了更好地理解上述代码的工作原理，我们可以创建一个具体的示例。以下是一个完整的HTML文档，包含了示例的HTML元素和Javascript代码：

<!DOCTYPE html>
<html>
<head>
  <title>点击按钮显示/隐藏密码</title>
</head>
<body>
  <h1>点击按钮显示/隐藏密码</h1>

  <input type="password" id="passwordInput">
  <button id="toggleButton">显示/隐藏密码</button>

  <script>
    var passwordInput = document.getElementById("passwordInput");
    var toggleButton = document.getElementById("toggleButton");

    toggleButton.addEventListener("click", function() {
      if (passwordInput.type === "password") {
        passwordInput.type = "text";
      } else {
        passwordInput.type = "password";
      }
    });
  </script>
</body>
</html>

在上面的示例中，我们创建了一个标题和密码输入框，然后紧跟着一个按钮。通过点击按钮，可以切换密码的显示和隐藏状态。