Placeholder su ie8 con jQuery

Vediamo come impostare il supporto al tag placeholder HTML5 su IE8 o precedenti grazie all’uso di jQuery.

Come ben saprete il tag HTML5 placeholder permette di inserire delle linee guida alla compilazione direttamente dentro gli input dei vostri form; Di fatto si tratta di un tag utilissimo per migliorare la UX e l’appeal generale del vostro progetto. Come sempre però su IE8 e precedenti il tag non viene riconosciuto, facendo apparire il form spartano e poco curato.In questa guida passo-passo vediamo come risolvere questo fastidioso problema e abilitare una volta per tutte il supporto a questo prezioso tag.

[button link=”http://www.targetweb.it/tutorial/2013/placeholder-jquery/index.php” color=”blue” target=”blank” size=”large”]Demo[/button]

Struttura HTML

La struttura html è quella classica di un comune form HTML:

<form id="contact">

<label for="nome">Nome <span class="asterisco">(*)</span></label>
<input type="text" name="nome" id="nome" placeholder="Digita il tuo nome" minlength="2" />

<label for="Email">Email <span class="asterisco">(*)</span></label>
<input type="email" name="email" id="email" placeholder="Digita la tua email" >

<label for="messaggio">Richiesta <span class="asterisco">(*)</span></label>
<textarea type="textarea" cols="50" rows="10" name="messaggio" id="messaggio" placeholder="La tua richiesta" minlength="10"></textarea>
 <br />

</form>

Nota: Il tag placeholder viene recuperato tranquillamente anche senza ulteriori hacks se il browser supporta il tag.

Hack per emulare il tag su Internet Explorer con jQuery

Per prima cosa ricordiamoci di includere le librerie jQuery in questo modo:

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

A questo punto ecco il codice per creare il finto placeholder su IE:

$(document).ready(function() {

    //per ciascun input e textarea esegui il codice sotto
    $('input,textarea').each(function () {
        // se placeholder è vuoto o non esiste (caso ie)
        if ($(this).attr('placeholder') != "" && this.value == "") {
            //Setta il value dell'input recuperando il testo dal placeholder
            $(this).val($(this).attr('placeholder'))
                   //imposta il colore grigio tipico del placeholder
                   .css('color', 'grey')
                   //Inizio azioni da eseguire al click
                   .on({
                       //un utente ha cliccato dentro l'input
                       focus: function () {
                         //Recupero il value dell'elemento cliccato, se corrisponde al placeholder
                         if (this.value == $(this).attr('placeholder')) {
                           // Faccio sparire il finto placeholder e setto di nuovo colore nero all'input
                           $(this).val("").css('color', '#000');
                         }
                       },
                       //Se l'utente clicca fuori dall'input dopo averci cliccato
                       blur: function () {
                         //Routine per ripristinare il fake placeholder
                         if (this.value == "") {
                           $(this).val($(this).attr('placeholder'))
                                  .css('color', 'grey');
                         }
                       }
                   });
            }//If placeholder non presente (ie)
    });//EACH

 }); //DOM

Come sempre vi invito a visionare il codice commentato passo-passo per capire meglio il funzionamento del codice. Ecco un riassunto del funzionamento generale:

• Per ciascun input o textarea presente nel documento (funzione each() di JQuery)
• Setta il value dell’input recuperando il testo dal placeholder (funzione attr() e val() di jQuery)
• Stilizzo il value in modo che appaia in grigio come si conviene a ogni placeholder (funzione css() di jquery).
• Una volta recuperato e settato il value (nel caso il tag placeholder non sia supportato) e stilizzato a questo punto impostiamo le azioni sull’elemento (on e blur)
• Action On —> Un utente ha cliccato dentro l’input  –> il fake placeholder si deve eliminare –> imposto lo stile classico dei form value.
• Action Blur –> Un utente ha cliccato fuori dall’input senza compilarlo –> il fake placeholder si deve ripristinare

Plugin jQuery dedicato

Ovviamente esistono dei plugin sviluppati ad Hoc per abilitare il supporto placeholder su internet explorer. Tra i più famosi vi cito jQuery Placeholder, che tra le altre cose è testato e funzionante a partire da Internet explorer 6!

Conclusioni

Come sempre vi lascio alla demo e il download oltre che alla documentazione per approfondire le tecniche usate in questo articolo:

[button link=”http://www.targetweb.it/tutorial/2013/placeholder-jquery/index.php” color=”blue” target=”blank” size=”large”]Demo[/button] [button link=”http://api.jquery.com/blur/” color=”blue” target=”blank” size=”large”]jQuery Blur[/button] [button link=”http://api.jquery.com/on/” color=”blue” target=”blank” size=”large”]jQuery On[/button]

[viral-download file1=”http://www.targetweb.it/download/2013/placeholder-jquery.zip” name1=”SCARICA IL CODICE USATO IN QUESTO ARTICOLO” url=”http://www.targetweb.it/placeholder-su-ie8-con-jquery” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#jQuery – Placeholder su ie8 con jQuery” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]

Spero che questo articolo vi sia servito per capire una possibile tecnica alternativa all’utilizzo dei più famosi plugin disponibili in rete, che in fin dei conti, usano una struttura molto simile a quella che vi ho illustrato.

Conosci altre tecniche o plugin per abilitare il supporto placeholder su IE? Raccontacelo nei commenti!