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
