input placeholder

Una din treburile bune introduse de HTML5 este atributul placeholder pentru input-uri. Long story short, afișezi un soi de label în interiorul unui input sau textarea. Sigur, browserele vechi (sau alea de căcat, să includem și IE9) nu știu să afișeze chestii d’astea exotice. Prin urmare, este nevoie de un mic script js.

Tot cârnatul ăsta este o adaptare a unui alt cârnat găsit cu ceva timp în urmă, pentru care am adăugat suport pentru textarea și am eliminat input type="file" din ecuație deoarece trântește erori de securitate.

var fakeInput = document.createElement("input"),
		placeHolderSupport = ("placeholder" in fakeInput),
		clearValue = function (e) {
			if ($(e).val() === $(e).data('placeholder')) {
				$(e).val('');
			}
		};
if (!placeHolderSupport) {		
	$('input[placeholder], textarea[placeholder]').each(function(){
		var searchField = $(this),
				originalText = searchField.attr('placeholder'),
				val = this.value;
		if(this.type.toLowerCase()=='file') {return ;}
		searchField.data('placeholder', originalText);
		
		if(val == '') { this.value = originalText; }else {
			searchField.addClass("placeholder")
		}
		
		searchField.bind("focus blur", function (e) { 
			var t = this;
			switch(e.type){
				case "blur":
				default:
					if (t.value.length === 0) { $(t).val(originalText).addClass("placeholder"); }
				break;
				case "focus":
					if(t.value == originalText ) {t.value = '';} 
				break;
			}
		});
	});

	$("form").bind("submit", function () {
		clearValue($('input[placeholder]', this));
	});

	$(window).bind("unload", function () {
		clearValue($('input[placeholder]', this));
	});
}

Varianta minified este aici.