📌  相关文章
📜  如何制作显示密码按钮 - Javascript (1)

📅  最后修改于: 2023-12-03 15:24:04.720000             🧑  作者: Mango

如何制作显示密码按钮 - Javascript

有时候，在输入密码的时候，用户可能会感到困惑或不安，因为密码是被隐藏的，他们无法检查自己输入的是否正确。在这种情况下，添加一个 "显示密码" 按钮可以帮助用户确认和检查密码的正确输入。在本教程中，我们将使用 Javascript 来制作这个 "显示密码" 按钮。

实现 "显示密码" 按钮的 HTML 结构

首先，我们需要一个带有输入密码框和 "显示密码" 按钮的 HTML 结构。我们将使用以下代码来创建这个结构：

<div class="form-group">
  <label for="password">密码：</label>
  <input type="password" class="form-control" id="password" placeholder="请输入密码">
  <button type="button" id="show-password-btn" class="btn btn-info">显示密码</button>
</div>

我们将使用 Bootstrap 来美化这个表单，包括输入框和显示密码按钮。我们还给按钮添加了一个 ID，以便在 Javascript 中引用它。

使用 Javascript 实现 "显示密码" 功能

现在，我们需要编写 Javascript 代码来为 "显示密码" 按钮添加功能。我们将使用以下代码来实现这个功能：

const passwordInput = document.getElementById('password');
const showPasswordButton = document.getElementById('show-password-btn');

showPasswordButton.addEventListener('click', function() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    showPasswordButton.textContent = '隐藏密码';
  } else {
    passwordInput.type = 'password';
    showPasswordButton.textContent = '显示密码';
  }
});

这里，我们首先获取了密码输入框和显示密码按钮的引用。然后，我们添加了一个点击事件监听器，当用户单击 "显示密码" 按钮时，将会触发该事件。

在监听器中，我们使用 if 语句来检查当前密码输入框的类型。如果它是 "password" 类型，那么我们将其更改为 "text" 类型，并将 "显示密码" 按钮的文本更改为 "隐藏密码"。如果它是可见的 "text" 类型，我们将其更改为 "password" 类型，并将按钮文本更改为 "显示密码"。

结论

现在我们已经学会用 Javascript 制作了一个 "显示密码" 按钮。用户可以单击该按钮来切换密码输入框的可见性，以便检查他们输入的密码是否正确。以下是我们的完整 HTML/CSS/Javascript 代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>显示密码按钮 - Javascript</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h1>显示密码按钮 - Javascript</h1>
      <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" class="form-control" id="password" placeholder="请输入密码">
        <button type="button" id="show-password-btn" class="btn btn-info">显示密码</button>
      </div>
    </div>
    <script>
      const passwordInput = document.getElementById('password');
      const showPasswordButton = document.getElementById('show-password-btn');

      showPasswordButton.addEventListener('click', function() {
        if (passwordInput.type === 'password') {
          passwordInput.type = 'text';
          showPasswordButton.textContent = '隐藏密码';
        } else {
          passwordInput.type = 'password';
          showPasswordButton.textContent = '显示密码';
        }
      });
    </script>
  </body>
</html>

我们使用了 Bootstrap 5 作为CSS样式，可以使表单看起来更美观。当然这不是必要的步骤，您可以根据您的需要自由地使用HTML和CSS自定义样式。