Appending a <label/> to an Element not working in Internet explorer

[colorblind]

Hy all,

I have the following script, works perfectly in Firefox 2/3, but I’m having a problem with IE7 on WinXP. The text in the label tags remains visible next to each form field, and the labels within the form fields don’t appear at first — they show up only after tabbing through them (or adding, then removing input).

var stereolabels = Class.create();

stereolabels.prototype = {
  labels: [],

  initialize: function(options) {
    this.options = Object.extend({
			className : 'inside'
		}, options || {});
		
    this.labels = $$('label.'+this.options.className);
    $A(this.labels).each(function(label) {
      this.initLabel(label);
    }.bind(this));
    
    $A(document.forms).each(function(form) {
      Event.observe(form, "submit", function() { this.uninit() }.bind(this))
    }.bind(this));
  },

  // called on form submit
  // - clear all labels so they don't accidentally get submitted to the server
  // - WOULD CAUSE BUG IF FIELD CONTENTS WAS IN FACT MEANT TO EQUAL LABEL VALUE
  uninit: function() {
    $A(this.labels).each(function(label) {
      var el = $(label.htmlFor);
      if (el && el.value == el._labeltext) this.hide(el)
    }.bind(this));
  },
  
  // initialize a single label.
  // - only applicable to textarea and input[text] and input[password]
  // - arrange for label_focused and label_blurred to be called for focus and blur
  // - show the initial label
  // - for other element types, show the default label
  initLabel: function(label) {
  	try {
  		var input     = $(label.htmlFor);
  		var inputTag  = input.tagName.toLowerCase();
  		var inputType = input.type;
  		if (inputTag == "textarea" || (inputType == "text" || inputType == "password")) {
  		  Element.setStyle(label, { position: 'absolute', visibility: 'hidden'});
  			Object.extend(input, {
  		    _labeltext: label.childNodes[0].nodeValue,
  		    _type: inputType
  		  });
  			Event.observe(input, 'focus', this.focused.bind(this));
  			Event.observe(input, 'blur', this.blurred.bind(this));
  			this.blurred({target:input});
  		} else {
  		  Element.setStyle(label, { position: 'static', visibility: 'visible' });
  		}
  	}
  	catch (e) { 
  	  Element.setStyle(label, { position: 'static', visibility: 'visible' });
  	}
  },
  
  focused: function(e) {
  	var el = Event.element(e);
  	if (el.value == el._labeltext) el = this.hide(el)
  	el.select();
  },

  blurred: function(e) {
    var el = Event.element(e);
  	if (el.value == "") el = this.show(el);
  },
  
  hide: function(el) {
  	if (el._type == "password") el = this.setInputType(el, "password");
  	el.value = "";
	  Element.removeClassName(el, this.options.className);
  	return el;
  },

  show: function(el) {
  	if (el._type == "password") el = this.setInputType(el, "text");
  	Element.addClassName(el, this.options.className);
  	el.value = el._labeltext;
  	return el;
  },
  
  setInputType: function (el, type) {
    try {
      el.type = type;
      return el;
    }
    catch (e) { //IE can't set the type parameter
      var newEl = document.createElement("input");
      newEl.type = type;
  		for (prop in el) {
  			try {
  			  // crazy bug that still exists in ie 7 with width and heights, use class name if necessary instead!
   				if (prop != "type" && prop != "height" && prop != "width") { 
  				  newEl[prop] = el[prop];
  				}
  			} 
  			catch(e) { }
  		}
  		Event.observe(newEl, 'focus', this.focused.bind(this));
			Event.observe(newEl, 'blur', this.blurred.bind(this));
  		el.parentNode.replaceChild(newEl, el);
  		return newEl;
    }
  }
}

Event.observe(window, 'load', stereolabelsInit, false);

var myLabels = null;
function stereolabelsInit() {
	myLabels = new stereolabels();
}

The script uses Prototype framework. After some test, i`ve discovered that with Prototype 1.5 works great on all browsers, but with Prototype 1.6.0.3 doesn`t work on IE. Can anyone help me with this ?

I forgot to tell you what this script`s for

Stereolabels: Form labels inside inputs with Prototype

stereolabels crawls the DOM for labels with the specified class name (default is ‘inside’) and places the label text inside the input field, and adds the class name to the input element. Upon clicking the field, the label is removed and the class name is removed from the input element. If the field is left blank when it loses focus, the label returns. This behavior is only applied to text, textarea, and password input fields.