Showing & Hiding Passwords on Forms

<div markdown="1" id="precis"> Web Forms typically use the special `password` type for password inputs. This hides the password from every body, but unfortunately includes the user. This looks at how to temporarily show the password if the user wants. </div>

Web Forms typically use the special password type for password inputs. This hides the password from every body, but unfortunately includes the user. This looks at how to temporarily show the password if the user wants.

The HTML Form

A typical login form includes some sort of user name or email address and a password.

<form id="login" action="">
    <p><label for="login-email">Email Address</label>
        <input type="text" name="email" id="login-email"
            required placeholder="Email Address"></p>
    <p><label for="login-password">Password</label>
        <input type="password" name="password" id="login-password"
            required placeholder="Password"></p>
</form>

The password field is of type password, which shows bullets as you type.

To show the password, we will add a button after the password field.

    <p><label for="login-password">Password</label>
        <input type="password" name="password" id="login-password"
            required placeholder="Password">
        <button name="show" title="Show Password">👀</button></p>

For the label for the show button, I thought the eyes (👀) would be fun.

You can get a pair of eyes in HTML by entering:

<button>&#x1F440;</button>
<button>&#128064;<button>
<button>👀</button>

The last one is a bit tricky, but easy enough if you use the MacOS’ Emoji & Symbols. Alternitavely, you can use on of the codes above and copy & paste the result, or just copy it from this article.

Some CSS

The eyes are facing the wrong way — we want it be looking away from the passord — so we can use the CSS transform:

form#login button[name="show"] {
    transform: scale(-1,1);
}

This scales the horizontal dimension by -1, effectively flipping it. The vertical dimension is untouched. When the time comes, we will flip it back to indicate that the password is visible.

The JavaScript

Trick is to temporarily change the type of the password field from password to text.

This will involve the following steps:

change the type to text.
set a custom attribute called on so that CSS can re-style the button as a reminder
use window.setTimeout() to queue a function to reverse the above.

Here we will set an arbitrary attribute called on. JavaScript will allow you to manipulate any attribute you like, including attributes you make up. Accordingly, CSS, will allow you to select on these attributes. Alternatively, you can use classes.

First, we find the form and form elements, and activate the show button:

var login=document.querySelector('form#login');
login['show'].onclick=showPassword;
function showPassword(event) {

}

Showing the button will be a matter of changing the type to text and setting the on attribute:

function showPassword(event) {
    login['password'].type='text';
    login['show'].setAttribute('on',true);
}

The next part is to use setTimeout to queue a function to reverse the process:

function showPassword(event) {
    //  …
    window.setTimeout(function() {
        login['password'].type='password';
        login['show'].removeAttribute('on');
    },10000);
}

Finally we stop the button from submitting. By default, a button inside a form will submit the form, unless it is specifically give a type of button or reset. We could have used the following:

<button type="button" name="show" title="Show Password">👀</button>

… but it is safer to intercept it in JavaScript. We do this by executing event.preventDefault():

function showPassword(event) {
    //  …
    event.preventDefault();
}

The Finished Code is:

var login=document.querySelector('form#login');
login['show'].onclick=showPassword;
function showPassword(event) {
    login['password'].type='text';
    login['show'].setAttribute('on',true);
    window.setTimeout(function() {
        login['password'].type='password';
        login['show'].removeAttribute('on');
    },10000);
    event.preventDefault();
}

More CSS

To indicate that the password is to be shown, we will change the appearance of the button. This is for both the :hover pseudo class, as well as when the on attribute is set.

In this case, we will restore the direction of the eyes, as well as increase the size.

This can be done by using transform: scale(1.6,1.6), which means that the horizontal scale is positive again, restoring its original direction, and both scales are larger than 1. More compactly, this can be written as transform: scale(1.6):

form#login button[name="show"]:hover,
form#login button[name="show"][on] {
    transform: scale(1.6);
}

The rest of the CSS will help to resize and position the button, and add a bit of animation:

form#login button[name="show"] {
    border: none;
    background-color: transparent;
    font-size: 1.2em;
    position: relative;
    top: 3px;
    left: 2px;
    transition: transform .75s;
    transform: scale(-1,1);
}
form#login button[name="show"]:hover,
form#login button[name="show"][on] {
    transform: scale(1.6);
}