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.
- Posted in:
- JavaScript
Uuh, superb cârnat! Mic si foarte folositor. Mersi pentru împărtășire
Adi, mulțumesc pentru comentariu. Mă bucur că îți este util.
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.