Placeholder sind eine feine Sache, kann man mit ihnen doch das Layout verschlanken und die teilweise hässlichen Label verschwinden lassen (aber nur display:none -> Barrierefreiheit). Leider funktionieren diese wieder einmal nicht in den älteren Internet Explorern. Wobei alt gut ist, denn auch der Internet Explorer 9 verweigert die Anzeige.
Zunächst muss ein neues Attribut in die Inputs und Textareas. Sinnigerweise nennen wir es placeholder. Dieses bekommt nun den Platzhaltertext verpasst.
<input placeholder="Platzhaltertext" name="name" />
Nachfolgend nun der jQuery-Code um die Funktionalität zu implementieren.
jQuery('.ie form').each(function (i, e) {
var form = jQuery(e);
var inputs = form.find('input, textarea')
inputs.each(function (i, e) {
var item = jQuery(e);
if (item.attr('placeholder')) {
if (!item.val()) {
item.addClass('placeholder').val(item.attr('placeholder'))
}
item.focus(function () {
var that = jQuery(this);
if (that.val() == that.attr('placeholder')) {
that.val('').removeClass('placeholder')
}
}).blur(function () {
var that = jQuery(this);
if (that.val() == '') {
that.val(that.attr('placeholder')).addClass('placeholder')
}
});
}
});
form.submit(function () {
inputs.each(function (i, e) {
var item = jQuery(e);
if (item.val() == item.attr('placeholder')) {
item.val('')
}
});
});
});
Der Selektor .ie bezieht sich dabei auf eine übergeordnete Klasse. Diese am besten in die Body-Klasse legen. Ich habe darauf verzichtet den ie per Klasse(n) zu unterteilen. Wer will macht das ganze feiner differenziert.
Da wir den Elementen mit .placeholder noch eine CSS-Klasse zuweisen um den Platzhalter optisch von Inhalten zu unterscheiden, hier noch ein passendes CSS:
.placeholder {
color: #aaa;
}