Telefono: +39 392 33 73 731

Fix Placeholder tag html e stile CSS

Placeholder è un attributo nuovo di HTML5 e viene supportato attualmente da tutti i browser nuovi eccetto Opera Mini.
Purtroppo però dobbiamo sempre fare i conti con la retro compatibilità, che è critica in Internet Explorer dato che lo supporta solo dalla versione 10. Per vedere una tabella con il supporto di tutti i browser nelle varie versioni visitate questa pagina.
Osservate quindi le statistiche dei visitatori per tenere sotto controllo quanti restano ancorati a IE 7-8-9, e fin che sararanno molti attuate i fix via javascript per risolvere il problema (ne suggerisco uno in JQuery di seguito).

Vediamo come si implementa in HTML il placeholder:

<input type="text" placeholder="Inserisci qui il tuo testo...">

Di default il testo è di colore grigio chiaro, però possiamo intervenire via CSS per cambiarlo, purtroppo in questo fronte siamo ancora ad uno stadio prematuro quindi dobbiamo usare le varianti per tipo di browser.

Ecco il CSS per impostare il colore del testo al placeholder, per semplificazione il mio codice colora tutti i placeholder della pagina, ma ovviamente potete anche specificare meglio il selettore (esempio "#miaform input"). Tenere in ogni caso le tre regole separate come riportato, perché i browser quando non riescono ad interpretarne una la saltano di netto (eccetto IE 7).

 

/*
* Placeholder cross browser
* */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: green;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: green;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: green;
}

JQuery fix Internet Explorer per i placeholder

Il seguente piccolo codice JQuery itercetta tutti i $('[placeholder]') della pagina e li fa funzionare anche nei browser che non lo supportano. La chiamata "blur()" inizializza i campi.

La seconda parte del codice serve per evitare che al submit della form vengano inviati i valori di placeholder, non è quello che vogliamo.

 

$(document).ready(function() { 
$('[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("''");
    }
  })
});
});

Secondo me la soluzione più elegante è inserire questo script in un js esterno da caricare solo ne caso in cui il browser non lo supporti (quindi un commento condizionale per Internet Explorer minore o uguale a 9), gli altri browser standard dovrebbero non necessitare di questo fix. Quindi in <head> della nostra pagina inseriamo il seguente codice.

<!--[if lte IE 9]>
<script src="cartella-dei-tuoi-script-js/placeholder-fix.js"></script>
<![endif]-->
Mercoledì 09 Gennaio 2013
(0 commenti)
CSS

Aggiungi un commento

Nome
E-mail (non verrà pubblicata)
Sito Web
Commento