input type=”placeholder” v.2

În urmă cu ceva timp am postat un cod ce activa atributul placeholder și pe browsere mai vechi. Tot folosind scriptul în diverse proiecte am observat (și reparat) mici probleme. Iată o versiune actualizată cu următoarele modificări:

1. Am adăugat clasa placeholder pentru elemente. Astfel, poți stiliza diferit respectivul element în funcție de ce conține (valoare legitimă sau placeholder);
2. Am adăugat un container, ce-ți permite să activezi suportul pentru placeholder și pentru elementele injectate în DOM (sau doar pentru anumite elemente; exemplu: enablePlaceholderSupport('#header')). Dacă nu e specificat niciun container, placeholder este activat pentru toate elementele din body;
3. Am îmbunătățit modul în care se afișează atributele value vs placeholder;
4. Și cred că atât.

Enjoy!

function enablePlaceholderSupport(wrap){
	var $ = jQuery,
			wrap = wrap || 'body',
			fakeInput = document.createElement("input"),
			placeHolderSupport = ("placeholder" in fakeInput),
			clearValue = function (e) { if ($(e).val() === $(e).data('placeholder')) { $(e).val(''); } };

	if (!placeHolderSupport) {
		$('input[placeholder]', wrap).each(function(){

			var searchField = $(this),
					originalText = searchField.attr('placeholder'),
					val = $.trim(this.value);
			if(typeof searchField.data('placeholder') !== 'undefined') { return; }

			searchField.data('placeholder', originalText);
			if(val == '') { $(this).val(originalText).addClass("placeholder"); }

			searchField.bind("focus.ntz_placeholder", function () { if(this.value == $(this).data('placeholder')){ $(this).val('').removeClass('placeholder'); } }).bind("blur.ntz_placeholder", function () {
				if (this.value.length === 0) {
					$(this).val(originalText).addClass("placeholder");
				}
			});
		});

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

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

jQuery(document).ready(function($){ enablePlaceholderSupport(); });

Aici este varianta minified.