Molti di voi stanno iniziando ad utlizzare il meraviglioso markup di HTML5 che finalmente ci libera da moltissime rotture e ci introduce tanti nuovi tag con un significato sematico fortissimo!
Una importante novità è quella di un attributo per i campi di input, il palceholder. Il placeholder ci permette di visualizzare un testo nel campo input anche quando questo non è stato ancora compilato per aiutare il visitatore a comprendere l’utilizzo del campo.
Putroppo questo attributo non è ancora supportato da tutti i browser al momento della scrittura di questo articolo.
Con questo articolo voglio mostrarvi come visualizzare il placeholder anche con i browser che ancora non lo supportano sfruttando la libreria Modernizr.
Per iniziare devi assiocurarti di includere nel tuo file HTML le librerie necessarie subito prima della chiusura del tag </head>
<script src="jquery.js"></script>
<script src="modernizr.js"></script>Ora ti puoi concentrare a scrivere lo script che ti aiuterà a visualizzare sempre un placeholder nei tuoi campi input. Quindi dovrai posizionare il seguente script nel footer del tuo sito, magari subito prima del tuo tag </body> di chiusura oppure lo potrai inisere sempre nel tag <head> ma ricordati che dovrai scriverlo sempre dopo le librerie che hai importato in precedenza.
<script type="text/javascript">
$(document).ready(function(){
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
</script>Hai già finito! Facile vero? Ora il tuo placeholder funzionerà con qualasiasi browser e potrai divertirti a stilizzarlo con il CSS.
Spero questa guida ti sia tornata utile, nel caso fammelo sapere nei commenti!
Se ti è piaciuto questo articolo o ti è stato utile in qualche modo, lascia un commento, condividilo con i tuoi amici e seguimi sui social.