Skip to main content Accessibility Feedback

How to toggle password visibility with vanilla JavaScript

Hiding passwords visibility in forms helps protect from people looking over your shoulder and reading your password, but greatly increases in the likelihood that someone will enter the wrong one.

Today, I want to show you how to implement a simple show/hide password toggle with vanilla JavaScript.

The Form #

Here’s a simple form with a username and password. I’ve also added a checkbox users can click to reveal or hide their password.

<label for="username">Username</label>
<input type="text" name="username" id="username">

<label for="password">Password</label>
<input type="password" name="password" id="password">

<label for="show_password">
    <input type="checkbox" name="show_password" id="show_password">
    Show Password
</label>

How this is going to work #

When a user checks the show_password checkbox, we’ll get the password field and change it’s type from password to text. If they uncheck the box, we’ll switch it back to password.

Yea, it’s really that simple!

The JavaScript #

Listening for changes #

We’ll use addEventListener to listen for click events on our show_password input. This will also detect changes submitted with a keyboard (as in, tabbing onto the checkbox and hitting the enter key).

We’ll listen for all clicks on the document, and check to see if the clicked element was our show_password checkbox—a technique called event delegation.

Whenever a click event happens, we’ll check to see if it has an ID of show_password. If not, we’ll bail.

// Listen for click events
document.addEventListener('click', function (event) {

    // If the clicked element isn't our show password checkbox, bail
    if (event.target.id !== 'show_password') return;

}, false);

Toggling password visibility #

Next, we want to get the password field. If no field is found, we’ll bail.

// Listen for click events
document.addEventListener('click', function (event) {

    // If the clicked element isn't our show password checkbox, bail
    if (event.target.id !== 'show_password') return;

    // Get the password field
    var password = document.querySelector('#password');
    if (!password) return;

}, false);

Next, we want to see if the checkbox is checked or not. We can do this with the .checked property on our event.target.

If it’s true, the checkbox is checked. Otherwise, it’s not.

// Listen for click events
document.addEventListener('click', function (event) {

    // If the clicked element isn't our show password checkbox, bail
    if (event.target.id !== 'show_password') return;

    // Get the password field
    var password = document.querySelector('#password');
    if (!password) return;

    // Check if the password should be shown or hidden
    if (event.target.checked) {
        // Checkbox is checked
    } else {
        // Checkbox is not checked
    }

}, false);

If it’s checked, we’ll change the password field input type to text to show it. Otherwise, we’ll set it to password.

// Listen for click events
document.addEventListener('click', function (event) {

    // If the clicked element isn't our show password checkbox, bail
    if (event.target.id !== 'show_password') return;

    // Get the password field
    var password = document.querySelector('#password');
    if (!password) return;

    // Check if the password should be shown or hidden
    if (event.target.checked) {
        // Show the password
        password.type = 'text';
    } else {
        // Hide the password
        password.type = 'password';
    }

}, false);

Here’s a working demo for you to check out.

Tomorrow, we’ll look at how to toggle multiple password fields and make this code a bit more reusable.


🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips