Con l’avvento di html5 stanno aumentando i benefici per gli sviluppatori frontend che devono migliorare la user experience, ma si scontrando spesso con i limiti dei browser datati.
Un piccolo aiuto viene dalla proposta del forum sull’html5 di utilizzare l’attributo placeholder nei campi di input testuali per suggerire all’utente cosa inserire. Questo attributo funziona per il momento solo sui browser basati su Webkit (Safari e Chrome), ma è possibile clonarne la funzione con un po’ di jQuery.
Prima controlliamo se il browser supporta l’attributo placeholder (metodo usato su Dive Into HTML5 )
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
e poi la funzione vera e propria in jQuery
$(document).ready(function(){
if(!supports_input_placeholder()) {
$('input[type=text]').each(function() {
var plch = $(this).attr('placeholder');
$(this).css('color','#999')
.focus(function(){
if($(this).val() == plch) {
$(this).val('').removeAttr('style');
}
})
.blur(function(){
if(!$(this).val()) {
$(this).css('color','#999').val(plch);
}
})
.val(plch);
})
}
});
