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:
- 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); - 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 dinbody
; - Am îmbunătățit modul în care se afișează atributele
value
vsplaceholder
; - Ș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.
- Posted in:
- JavaScript
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($)….)
Multumesc pentru script.
Mulțumesc. Rezolvat.
Mă bucur că ai găsit util acest script.