Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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).

    Code:
    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.
    Last edited by colorblind; 01-06-2009 at 11:06 AM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •