User-friendly Password Field

You type a letter into a password field and, ugh, you wonder if you hit the "e" or the "d" on the keyboard.

The character you typed is obfuscated with an asterisk. Therefore, you'll need to delete the last asterisk and retype the character to be sure you typed the right thing.

It's a conundrum. Obfuscation is required for security. But it wreaks havoc with user-friendliness.

This article describes how to make a user-friendly password field that's still obfuscated with asterisks.

When a character is typed into the password field, the character is visible for a specified length of time (measured in seconds or fraction of a second). When the time expires, the character is obfuscated by replacing it with an asterisk.

When another character is typed into the field, the previous character is obfuscated immediately.

This gives your site users the ability to momentarily see what they typed. Much friendlier, don't you think?

Here's a demonstration.

Because it's a demonstration, the above form tells you what would have been submitted when you click the button — instead of actually submitting it.

Here's the HTML markup of the form used in the demonstration. Notes follow.

<form id="form-with-pw-field" onsubmit="return SubmitFormWithPassword()">
Password: 
<input id="pwfield" type="text" onkeyup="PasswordObfuscation()" style="width:150px;">
<br><input type="submit" value="Submit Form">
</form>

Notes:

The two id values printed in blue will be specified in the JavaScript (further below).

The onsubmit attribute of the form field and the onkeyup attribute of the field where the password is to be typed into are printed in red and are required.

And here is the JavaScript code. The JavaScript can go anywhere in the source code of the web page. There are 3 customizations, noted below the code.

<script type="text/javascript">
/* 
   User-friendly Password Field
   Version 1.0
   April 21, 2014

   Will Bontrager Software LLC
   https://www.willmaster.com/
   Copyright 2014 Will Bontrager Software LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software LLC grants 
   you a royalty free license to use this 
   software provided this notice appears 
   on all copies. 
*/

/* Three customizations: */
//
// 1.
// ID value of form field with password.

var IDofFormWithPasswordField = "form-with-pw-field";

// 2.
// ID value of form field with password.

var FormFieldWithPasswordID = "pwfield";

// 3.
// Number of seconds to delay before obfuscating last character typed.
//    Decimal number OK, like 1.5 or 0.75

var DelayBeforeObfuscating = 0.75;

//
/* End of customization. */

var Timer;
var FieldValue = new String();
var Field = document.getElementById(FormFieldWithPasswordID);

function ObfuscateAllOfPassword()
{ 
   var s = new String();
   for( var i=0; i<FieldValue.length; i++ ) { s += '*'; }
   Field.value = s;
} // function ObfuscateAllOfPassword()

function ObfuscateAllButLastOfPassword()
{ 
   var point = Field.value.length - 1;
   if( point < 1 ) { return Field.value; }
   var s = new String();
   for( var i=0; i<point; i++ ) { s += '*'; }
   if( FieldValue.length && FieldValue.length > point ) { s += FieldValue.substr(-1); }
   Field.value = s;
} // function ObfuscateAllButLastOfPassword()

function PasswordObfuscation()
{
   clearTimeout(Timer);
   if( ! Field.value.length )
   {
      FieldValue = "";
      return;
   }
   if( (! FieldValue.length) && Field.value.length > 1 ) { FieldValue = Field.value; }
   if( FieldValue.length )
   {
      if( FieldValue.length < Field.value.length ) { FieldValue += Field.value.substr(-1); }
      else if( FieldValue.length > Field.value.length )
      {
         FieldValue = FieldValue.substr(0,Field.value.length);
      }
   }
   ObfuscateAllButLastOfPassword();
   var s = new String();
   for( var i=0; i<Field.value.length; i++ )
   {
      var c = Field.value.substr(i,1);
      if( c == "*" && FieldValue.length >= i ) { s += FieldValue.substr(i,1); }
      else { s += c; }
   }
   FieldValue = s;
   Timer = setTimeout( "ObfuscateAllOfPassword()", parseInt(DelayBeforeObfuscating*1000) );
} // function PasswordObfuscation()

function SubmitFormWithPassword()
{
   Field.value = FieldValue;
   document.getElementById(IDofFormWithPasswordField).submit();
   Field.value = '';
   FieldValue = '';
   return false;
} // function SubmitFormWithPassword()
</script>

There are three places to customize.

The first two places are printed in blue and correspond to the id values in the form.

The third place is printed in red and is where you specify how many seconds the last character typed into the field will be visible before it's turned into an asterisk. Use decimal numbers for fractions of seconds.

When the customizations have been completed, the JavaScript is ready for the page. If preferred or required (the latter in case you're using WordPress), the JavaScript can be imported from an external file.

For browsers with JavaScript turned on, the password will be obfuscated after the delay interval you specify, and JavaScript will be used to cause the form to be submitted.

For browsers with JavaScript turned off, the password won't be obfuscated. But the form will still submit as it should.

The user-friendly method of accepting passwords is something to consider for making it more pleasant for your site users to interact with your website.

Will Bontrager