How to Toggle Password Visibility Using Plain JavaScript

Summary: in this tutorial, you will learn how to toggle the visibility of a password input by using plain JavaScript.

A password field provides a way for users to securely input a password by showing the * character instead of the actual characters.

However, it is likely that some users will type the wrong password. To help them see the password that they’re currently entering, you can add a button that allows them to toggle the password visibility.

To make the password visible, you follow these steps:

First, create an <input> element with the type of password and an icon that allows users to click it to toggle the visibility of the password.
Second, bind an event handler to the click event of the icon. If the icon is clicked, toggle the type attribute of the password field between text and password. The input with the type text will show the actual password.
Third, change the icon to make it more user-friendly. This step is optional.

To make it easy, we’ll use two icons from the Bootstrap icon for toggling the visibility of the password.

The following shows the HTML code of the page:

<!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/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)

The HTML page has an input element with the type password and an <i> element with the CSS classes provided by Bootstrap CSS.

The Bootstrap CSS allows you to use the class bi-eye of the <i> element to show the eye icon. To change the icon from eye to eye slash, you just need to change the class of the <i> element to bi-eye-slash

To place the icon inside the password input, you can use the negative margin for the <i> element as follows:

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

The rest of the CSS is straightforward.

In the JavaScript:

First, select the toggle password icon and the password input field using the querySelector() method:

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

Then, attach an event listener to the togglePassword icon and toggle the type attribute of the password field as well as the class of the icon:

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)

To view the whole page, you can check it out here.

Was this tutorial helpful ?