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 tests, ive discovered
that with Prototype 1.5 works great on all browsers, but with
Prototype 1.6.0.3 doesnt work on IE. Can anyone help me with this ? :(
I forgot to tell you what this scripts 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.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
