1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blpass1.htm

was emailed to:

Thanks for sharing About.com with others!

Password Fields

Displaying Default Content in Plain Text

Password fields differ from ordinary input fields in that instead of displaying the value of the field in plain text they display a row of asterisks or dots of the same length instead. This hides the actual field content from anyone who looks at the field on the screen after you have typed it in. The content isn't encrypted or anything like that, it is just hidden from casual view.

One rather iteresting problem with regard to password fields is where you are setting up a form with default text in each field of the form where you want to be able to do the same with the password field and have that default content display as readable text.

The only way that we can achieve this is by using JavaScript to change the type of the input field between text and password. It isn't quite that straightforward though because Internet Explorer runs JScript instead of JavaScript and while JavaScript can update the type of a form field that is already a part of the page, JScript cannot. So in order to get it to work in Internet Explorer the way it does in other browsers we are going to need to swap out the entire input field each time we need to change its type. Fortunately JScript provides us with conditional comments that we can use to determine whether to use the simple JavaScript code or the more complex JScript version.

Just so that you can see that it really can be done, here's a form with just the one input field where we want our visitor's to enter a password.

So the next step is to look at just how we need to define that in the HTML so as to use it with our JavaScript. Here it is.

<input type="password" name="pass" id="pass">

As you can see it is just an ordinary password field with no default value assigned. We need it coded this way in the HTML so that the password field will still conceal the password correctly for those who don't have JavaScript enabled. Unfortunately for those people we can't swap the field type and so can't display any readable text in the field at the start.

The only other thing we need is the JavaScript/JScript that will swap the field type (or complete field for JScript) for us. Most of the following code is actually for Internet Explorer so that it can do the complete field swap. As other browsers will treat the JScript code as comments we can use the more efficient method of just switching the field type in other browsers rather than swapping out the entire field. The code in bold is the part that the browsers other than Internet Explorer see while IE sees the entire code and runs all of it except for what is between the @else and @end statements.

var p = document.getElementById('pass');
/*@cc_on
   @if (@_jscript)
   var inp = document.createElement("<input name='pass'>");
   inp.id = 'pass1';
   inp.type = 'text';
   inp.value = 'password';
   p.parentNode.insertBefore(inp,p);
   p.parentNode.removeChild(p);
   p = document.getElementById('pass1');
@else */
   p.type = 'text';
   p.value = 'password';
/* @end @*/
p.onfocus = function() {
if (this.type == 'text') {
   /*@cc_on
      @if (@_jscript)
   var inp = document.createElement("<input name='pass'>");
      inp.id = 'pass';
      inp.type = 'password';
      inp.value = '';
      this.parentNode.insertBefore(inp,this);
      this.parentNode.removeChild(this);
      inp.focus();
   @else */
      this.value = '';
      this.type = 'password';
      this.focus();
   /* @end @*/
}
}
See More About

©2014 About.com. All rights reserved.