Show/Obfuscate Password Field

The content within a password field generally is obfuscated. As a person types or taps their password into the field, or pastes it in, the characters are presented only as asterisks.

Generally, a secure password is over 13 characters in length and composed of a mix of upper-case, lower-case, numbers, and symbols.

When a person types that in and momentarily loses their place or is uncertain which character was typed last, the asterisks make it impossible to edit with certainty.

One way to do it is to type the password in a text editor, then copy it and paste it into the password field.

For your own forms, the password field can have an option. Let the person specify whether or not the password is obfuscated within the field.

It starts out obfuscated.

If the person loses their place, they can tap the "show" link. Then tap "obfuscate" when they have their place.

JavaScript is used to switch between obfuscated and plain text.

Here is a working example.

Tapping on the "show" link changes the field to type="text". Tapping on the "obfuscate" link changes the field to type="password".

The Form Field and Show/Obfuscate Links

The form in the above example is coded like this.

Password. 
<span id="makeplaininput" style="display:inline;"><a href="javascript:ShowPasswordCharacters()">(show)</a></span>
<span id="makepwinput" style="display:none;"><a href="javascript:ObfuscatePasswordCharacters()">(obfuscate)</a></span>
<br>
<input id="pwinput" type="password">

The "show" and "obfuscate" links are in span tags with id values. The JavaScript will use the id values to display and un-display the links.

The "show" link is id makeplaininput. It's coded with display:inline; so it's displayed when the page first loads. Clicking on the link runs the JavaScript ShowPasswordCharacters() function.

The "obfuscate" link is id makepwinput. It's coded with display:none; so it's un-displayed when the page first loads. When it's displayed and the link is clicked, the JavaScript ObfuscatePasswordCharacters() function runs.

The password field itself is id pwinput. When ShowPasswordCharacters() or ObfuscatePasswordCharacters() runs, it changes the password field into type="text" and type="password", respectively.

The JavaScript

The JavaScript is below.

The id values and function names of the JavaScript are color coded to match the color of the form code, above.

<script>
function ShowPasswordCharacters()
{
    document.getElementById("makepwinput").style.display = "inline";
    document.getElementById("makeplaininput").style.display = "none";
    document.getElementById("pwinput").type = "text";
}
function ObfuscatePasswordCharacters()
{
    document.getElementById("makepwinput").style.display = "none";
    document.getElementById("makeplaininput").style.display = "inline";
    document.getElementById("pwinput").type = "password";
}
</script>

When the "show" link is clicked, ShowPasswordCharacters() runs and

1. the "show" link is un-displayed,
2. the "obfuscate" link is displayed, and
3. the input field is made into type="text".

When the "obfuscate" link is clicked, ObfuscatePasswordCharacters() runs and

1. the "show" link is displayed,
2. the "obfuscate" link is un-displayed, and
3. the input field is made into type="password".

Place the JavaScript anywhere on the web page. It may be imported from an external file. The JavaScript needs no customization.

The show/obfuscate option can make the form more user-friendly and accessible.

(This article first appeared in Possibilities newsletter.)

Will Bontrager