L’attributo placeholder, introdotto da HTML5, è una semplice ma a mio avviso utilissima feature che consente di poter inserire un testo identificativo o di suggerimento in un tag input o textarea. In questo intervento analizzeremo come utilizzarlo, come poter interagire con il css per modificarlo e infine come poterlo rendere compatibile con Internet Explorer (versioni precedenti alla 10). È compatibile con tutti i browser con motore Webkit (Chrome, Safari ecc..), Firefox e Opera.
Markup HTML
Il markup html è semplicissimo e immediato, basta aggiungere al nostro tag input o textarea l’attributo placeholder=”(contenuto)”, come qui sotto:
[html]
<input type="text" placeholder="Inserisci il tuo nome">
[/html]
In questo modo visualizzeremo il testo da noi inserito nel tag input e, nel momento in cui scriveremo qualcosa al suo interno, il suggerimento scomparirà per dare posto alla stringa di testo che avremo digitato. Nel caso cancellassimo ciò che abbiamo appena inserito, il placeholder riprenderà posto all’interno del tag.
Il placeholder non è da confondere con l’attributo value: esso non ha valore all’interno di un form, è soltanto un aiuto utile all’utente che compila il nostro campo.
Personalizzazione placeholder con CSS3
Lo stile del placeholder può essere modificato come se fosse un vero e proprio elemento html indipendente dal tag in cui è inserito. Possiamo agire in due modi differenti, in entrambi i casi però, le regole da noi inserite verranno correttamente interpretate soltanto dai browser con motore Webkit e da Firefox.
Le regole che seguono serviranno solo a modificare il testo del nostro placeholder
per Webkit si utilizza:
[css]
input::-webkit-input-placeholder{
color:#999;
}
[/css]
per Firefox si utilizza:
[css]
input:-moz-placeholder{
color:#999;
}
[/css]
In generale si tende a dare un colore al testo del placeholder più chiaro rispetto al colore del testo della input. Una nota importante dell’utilizzo di queste due proprietà Css è che non è possibile raggruppare le due regole in un’unica sola. Mi spiego meglio con questo esempio:
[css]
input:-moz-placeholder, input::-webkit-input-placeholder{
color:#999;
}
[/css]
Questa parte di codice non funzionerà.
Altra modifica che Css3 consente di poter apportare è la possibilità di modificare ad esempio un tag input, se questo possiede un attributo placeholder, con questa regola:
[css]
input[placeholder]{
background-color:#fefefe;
}
[/css]
In questo modo a tutti i tag input aventi l’attributo placeholder verrà impostato lo sfondo di colore #fefefe;
Placeholder fix per Internet Explorer
Internet Explorer in tutte le sue versioni fino ad ora pubblicate, non supporta l’attributo placeholder, non dà errori ma lo ignora completamente. Per poter ovviare a questo problema è abbastanza inserire un piccolo script, che venga eseguito ad esempio al dom.ready (se il browser utilizzato è appunto una qualsiasi versione di IE). In questo caso ho utilizzato come framework jQuery.
[js]
$(document).ready(function() {
if($.browser.msie) {
$(‘[placeholder]’).focus(function() {
var element = $(this);
if (element.val() == element.attr(‘placeholder’)) {
element.val(”);
element.removeClass(‘placeholder’);
}
}).blur(function() {
var element = $(this);
if (element.val() == ” || element.val() == element.attr(‘placeholder’)) {
element.addClass(‘placeholder’);
element.val(element.attr(‘placeholder’));
}
}).blur();
$(‘[placeholder]’).parents(‘form’).submit(function() {
$(this).find(‘[placeholder]’).each(function() {
var element = $(this);
if (element.val() == element.attr(‘placeholder’)) {
element.val(”);
}
})
})
}
});
[/js]
Per prima cosa si controlla se il browser utilizzato è Internet Explorer altrimenti il codice non verrà preso in considerazione. Dopodiché ciò che andremo a fare sarà semplicemente assegnare o togliere il valore del nostro placeholder all’attributo value, a seconda se stiamo selezionando il nostro tag input (focus), o se stiamo togliendo la selezione da esso (blur), sempre tenendo conto del valore inserito al suo interno.
Sostanzialmente in questo script la prima parte di codice racchiusa all’interno della funzione .focus(function(){ non farà altro che estrapolare il valore del placeholder, controllare se il value è uguale al valore del placeholder e in tal caso cancellare il valore di value. Questo è il caso in cui andiamo a cliccare per esempio la prima volta sulla input.
La funzione .blur(function() {, invece, farà l’opposto: se quando togliamo la selezione dalla input, il valore dell’attributo value sarà uguale al valore del placeholder o sarà vuota andremo a valorizzare quest’ultimo con il valore del placeholder.
L’ultima parte dello script agirà sull’evento submit del form che contiene i nostri tag html con placeholder e semplicemente andrà a prevenire l’inserimento del valore del placeholder nella compilazione del form, e quando si troverà davanti ad un caso di questo tipo, azzererà il valore dell’attributo value.
