Internet Explorer 8 non supporta l'attributo HTML5 placeholder che possiamo usare sui campi di testo per etichettarli. Per fortuna jQuery ci permette di emulare questo attributo con relativa semplicità. Vediamo come.
Dobbiamo creare un semplice plugin che posizioni un elemento con del testo a scelta sopra il campo di testo selezionato:
(function($) {
$.fn.placeholder = function(options) {
var that = this;
if(!that.is('input[type=text]')) {
return;
}
var defaults = {
text: 'Placeholder'
};
options = $.extend(defaults, options);
var top = that.offset().top;
var left = that.offset().left;
return that.each(function() {
$('<span class="placeholder"/>').text(options.text).
css({
position: 'absolute',
top: top,
left: left
}).insertAfter(that);
that.focus(function() {
that.next('span.placeholder').hide();
});
that.blur(function() {
if(that.val() == '') {
that.next('span.placeholder').show();
}
});
});
};
})(jQuery);
Usiamo l'offset superiore e sinistro del campo di testo per posizionare il nostro elemento. Quindi aggiungiamo due gestori di eventi: focus e blur. Il primo serve a fare in modo che quando l'utente digita nel campo il segnaposto scompaia, mentre il secondo lo fa riapparire se l'utente non ha digitato nulla.
Esempio:
$(function() {
$('#text', '#form').placeholder({text: 'Lorem'});
$('#text2', '#form').placeholder({text: 'Lorem ipsum'});
});
Potete visionare l'esempio finale in questa pagina.