Internet Explorer 8 e altri browser obsoleti non supportano l'attributo placeholder introdotto da HTML5 per gli elementi di input dei form. Tuttavia possiamo simulare questo attributo utilizzando jQuery. Vediamo come.
Partiamo da questo semplice form:
<form action="#" method="post">
<div>
<label for="name">Name</label>
<input type="text" placeholder="Enter your name" name="name" />
</div>
<div>
<label for="email">E-mail</label>
<input type="text" placeholder="Enter a valid e-mail address" name="email" />
</div>
<p><input type="submit" name="submit" value="Send" /></p>
</form>
I browser obsoleti riconoscono comunque l'attributo come un nodo attributo generico nel DOM. Quindi possiamo comunque selezionare placeholder e utilizzarlo per impostare la proprietà value degli input di testo in modo dinamico:
$('input[placeholder]').each(function() {
if ($(this).val() == '') {
$(this).val($(this).attr('placeholder'));
$(this).focus(function() {
if ($(this).val() == $(this).attr('placeholder')) $(this).val('');
});
$(this).blur(function() {
if ($(this).val() == '') {
$(this).val($(this).attr('placeholder'));
}
});
}
});
$('form').submit(function(evt) {
$('input[placeholder]').each(function() {
if ($(this).attr('placeholder') == $(this).val()) {
$(this).val('');
}
});
evt.preventDefault();
});
Ovviamente il codice di cui sopra va servito solo a quei browser che non supportano l'attributo originale. Per Internet Explorer vi consiglio di utilizzare i commenti condizionali.
Potete visionare l'esempio finale in questa pagina.