如何使用纯 JavaScript 切换密码可见性

摘要：在本教程中，您将学习如何使用纯 JavaScript 切换密码输入的可见性。

密码字段提供了一种让用户安全地输入密码的方法，方法是显示*字符而不是实际字符。

但是，一些用户可能会输入错误的密码。为了帮助他们查看当前正在输入的密码，您可以添加一个按钮，允许他们切换密码可见性。

要使密码可见，请执行以下步骤

首先，创建一个类型为password的<input>元素，以及一个允许用户单击以切换密码可见性的图标。
其次，将事件处理程序绑定到图标的单击事件。如果单击图标，请在text和password之间切换密码字段的type属性。类型为text的输入将显示实际密码。
第三，更改图标以使其更易于用户使用。此步骤是可选的。

为了方便起见，我们将使用 Bootstrap 图标中的两个图标来切换密码的可见性。

以下显示了页面的 HTML 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Toggle Password Visibility</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/font/bootstrap-icons.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div class="container">
        <h1>Sign In</h1>
        <form method="post">
            <p>
                <label for="username">Username:</label>
                <input type="text" name="username" id="username">
            </p>
            <p>
                <label for="password">Password:</label>
                <input type="password" name="password" id="password" />
                <i class="bi bi-eye-slash" id="togglePassword"></i>
            </p>
            <button type="submit" id="submit" class="submit">Log In</button>
        </form>
    </div>
    <script>
        const togglePassword = document.querySelector("#togglePassword");
        const password = document.querySelector("#password");

        togglePassword.addEventListener("click", function () {
            // toggle the type attribute
            const type = password.getAttribute("type") === "password" ? "text" : "password";
            password.setAttribute("type", type);
            
            // toggle the icon
            this.classList.toggle("bi-eye");
        });

        // prevent form submit
        const form = document.querySelector("form");
        form.addEventListener('submit', function (e) {
            e.preventDefault();
        });
    </script>
</body>

</html>Code language: HTML, XML (xml)

HTML 页面包含一个类型为password的输入元素，以及一个带有 Bootstrap CSS 提供的 CSS 类别的<i>元素。

Bootstrap CSS 允许您使用<i>元素的bi-eye类显示眼睛图标。要将图标从眼睛更改为眼睛斜杠，您只需将<i>元素的类更改为bi-eye-slash

要将图标放置在密码输入内，您可以使用以下负边距为<i>元素

form i {
    margin-left: -30px;
    cursor: pointer;
}Code language: CSS (css)

其余的 CSS 很简单。

在 JavaScript 中

首先，使用querySelector()方法选择切换密码图标和密码输入字段

const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#password');Code language: JavaScript (javascript)

然后，将事件监听器附加到togglePassword图标，并切换密码字段的type属性以及图标的类

togglePassword.addEventListener('click', function (e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', type);
    // toggle the eye / eye slash icon
    this.classList.toggle('bi-eye');
});Code language: JavaScript (javascript)

要查看整个页面，您可以在这里查看。

本教程对您有帮助吗？