Formularplatzhalter (form placeholder) mit jQuery für IE7, IE8 und IE9

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