Placeholder cross browser

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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.