1. Technology

JavaScript By Example

DOM Form: 8. Changing Type

By

Internet Explorer has issues with more than just the name attribute. While it does allow the type attribute to be set after an input field has been created, IE still does not allow you to change the type once it has been set. Fortunately there are not many situations where you actually need to change the type of a form field.

One instance where you do need to be able to change the type of an input field is when you want a self labelled password field. Self labelled fields do not have separate labels but instead set the initial value of the field to the description of what is to be entered into it and then clear that value when the field gets the focus so as to allow the actual value to be entered. With password fields the value is obscured so that someone looking at the screen cannot see what password you typed in and so the only way to create a self labelled password field is to give it a type of 'text' and only change its type to 'password' once the field has the focus ready to input a value. Since the form will rely on JavaScript to clear the values labelling all the fields those values should be set using JavaScript in the first place so that the person filling out the form who doesn't have JavaScript doesn't need to manually clear all those values themselves. Similarly a password field should be defined in the HTML in the HTML and only changed to a text field by the JavaScript that inserts the text description.

The code to do this type swapping would be relatively simple if it were not for the restriction in Internet Explorer. To get it to work in IE as well we need code specific to Internet Explorer that actually replaces the entire input field so as to be able to set the type. In this example we simply change the type to 'password' and back to 'text' for all browsers except IE. For IE we replace the entire password field with a text one once the page loads and replace it again with a password field once the text field gets the focus.

HTML


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

JavaScript


if (window.addEventListener)
addEvent = function(ob, type, fn ) {
ob.addEventListener(type, fn, false );
};
else if (document.attachEvent)
addEvent = function(ob, type, fn ) {
var eProp = type + fn;
ob['e'+eProp] = fn;
ob[eProp] = function(){ob['e'+eProp]( window.event );};
ob.attachEvent( 'on'+type, o[eProp]);
};
 
(function() {
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 @*/
passFocus = function() {
if ('text' === this.type) {
  /*@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 @*/
}
addEvent(p, 'focus', passFocus);
}
}();

  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. JavaScript By Example
  6. Document Object Model
  7. JavaScript By Example - DOM Form: Changing Type

©2014 About.com. All rights reserved.