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.

5 Comentarii to “input placeholder”

  1. Uuh, superb cârnat! Mic si foarte folositor. Mersi pentru împărtășire :)

  2. Staicu Ionuț-Bogdan

    Adi, mulțumesc pentru comentariu. Mă bucur că îți este util.

  3. Chiar cautam ceva de genul asta. Aveam nevoie sa folosesc placeholder, dar ezitam pentru ca stiam ca nu o sa se vada in browserele de kk. Eram convins ca se poate face cu un pic js da’ mi-era foarte sila sa-l fac. Mi-ai scutit niste timp. Multam.

Show trackbacks
  1. […] săptămâna trecută ți-am povestit despre placeholder, acum îți voi povesti puțin despre input type="search". La fel ca și placeholder, search este […]

  2. […] urmă cu ceva timp am postat un cod ce activa atributul placeholder și pe browsere mai vechi. Tot folosind scriptul în diverse […]

Ț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