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; }