HTML5 permette di utilizzare l’attributo placeholder
per visualizzare un testo, all’interno dei campi di input, che scompare al focus del mouse. Solitamente viene utilizzato in alternativa alle <label>
nei form. Internet Explorer 7 e 8 (okay okay il 7 facciamo finta che io non l’abbia nominato!) non supportano tuttavia questa funzionalità. Esiste un metodo rapido ed efficace in jQuery per simulare questo comportamento senza ricorrere a plugin esterni. Consiglio, seppur lo script non sia pesante, di utilizzare modernizr o fare un controllo sulla versione del browser, affinchè venga caricato solo se necessario. Vediamo come fare.
jQuery per simulare il placeholder
$('input[placeholder]').each(function(){ var input = $(this); $(input).val(input.attr('placeholder')); $(input).focus(function(){ if (input.val() == input.attr('placeholder')) { input.val(''); } }); $(input).blur(function(){ if (input.val() == '' || input.val() == input.attr('placeholder')) { input.val(input.attr('placeholder')); } }); });
Il codice di per sè è molto semplice ed auto-esplicativo.
In breve non facciamo altro che andare a targetizzare tutti gli elementi input per i quali si è dichiarato l’attributo placeholder
nel DOM. A quel punto non facciamo altro che riempire il value
con il testo recuperato e svuotarlo ogni qual volta si attiva il focus del mouse. Stupendo, no?!
Fonte codice: http://dipaksblogonline.blogspot.it/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html