[TYPO3-UG Berlin] Unobtrusive ClearDefault.js

[Murphy]

Hi alle miteinander,

ich habe ein kleines ClearDefault JS geschrieben, das Default-Werte  
aus Input Feldern nach onClick event löscht und ggf. wieder einsetzt,  
sollte der User keine Eingabe machen und das Feld einfach wieder  
verlassen. (Sieht man öfter bei Suchfeldern)
Es basiert auf Prototype und ist unobtrusive: Nach Body onLoad wird  
die Site nach Inputfeldern mit der CSS-Klasse "cleardefault" geparsed  
und dann werden zwei Observer attached, sprich:
Einfach einbinden, Input-Felder mit der CSS-Klasse "cleardefault"  
versehen und es funktioniert Out-of-the-box, sollte ein User kein JS  
aktiviert haben passiert halt nix.

(Vielleicht auch ein ganz nettes Beispiel für alle, die sich  
Prototype mal ansehen wollen)

Grüße,
Murphy

---
/*
*	Cleardefault.js
*/

var ClearDefault = Class.create();

ClearDefault.prototype = {

	initialize: function(element) {

		this.eventOnClick = this.clearDefaultText.bindAsEventListener(this);
		this.eventOnBlur = this.replaceDefaultText.bindAsEventListener(this);
				
		var inputElements = document.getElementsByTagName('input');
		
		for (var i = 0; i < inputElements.length; i++) {
			var input = inputElements[i];

			if (input.type == 'text' && input.className.match(/\bcleardefault 
\b/)) {

				// Save current value
				if (input.value != '') {
					input.defaultText = input.value;
				}

				Event.observe(input, 'focus', this.eventOnClick);
				Event.observe(input, 'blur', this.eventOnBlur);

         	}
     	}
	},
	destroy: function() {
		Event.stopObserving(this.element, 'change', this.eventOnKeyUp);
	},
	clearDefaultText: function(input){
		id = Event.element(input).getAttribute("id");
		document.getElementById(id).value='';
	},
	replaceDefaultText: function(input){
		id = Event.element(input).getAttribute("id");
		if(document.getElementById(id).value == ''){
			document.getElementById(id).value = document.getElementById 
(id).defaultText;
		}
	}
}



Event.observe(window, 'load', function() {
	new ClearDefault('ClearDefault');
});

---