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.

2 Comentarii to “input type=”placeholder” v.2”

  1. Buna Ionut!
    Tocmai am inserat codul acesta si functioneaza (pe IE7) insa lipseste o paranteza (pe ultimul rand trebuie inchisa paranteza ) de la ready(function($)….) :P
    Multumesc pentru script.

  2. Staicu Ionuț-Bogdan

    Mulțumesc. Rezolvat.

    Mă bucur că ai găsit util acest script. ;)

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter