20.10.2013

Placeholder-Attribut in alten Browsern (z.B. IE 6-9) ermöglichen

In modernen Formularen ist es üblich, in Eingabefeldern diverse Informationen vorzublenden. In Kontaktformularen können Sie z.B. an Stelle der Feldlabel die zu erwartende Information als Platzhalter (Placeholder) innerhalb des Feldes anbieten. In einem Suchfeld können Sie z.B. als Begriff „Suchbegriff hier eingeben“ vorblenden. Diese Methode ist einerseits platzsparend und andererseits erhöht sie die Flexibilität, falls Sie Ihre Website auf responsive Webdesign umstellen wollen. Doch leider reagieren noch nicht alle Browser auf das Placeholder-Attribut.

Insbesondere der Internet Explorer kleiner Version 9 kennt es nicht.

Nun gibt es mehrere Möglichkeiten:

Sie verwenden das Platzhalter-Attribut erst, wenn alle üblichen Browser darauf reagieren.
Sie leben damit, dass der Inhalt des Platzhalters nur in den Browsern angezeigt wird, die dieses Attribut unterstützen. Bei den anderen Browsern wird an dieser Stelle nichts gezeigt.
Sie versuchen es, für Browser, die auf dieses Attribut nicht reagieren, zu ergänzen.

Ich bin generell kein Freund davon, alle möglichen Funktionalitäten für alte Browser nachzurüsten. Zumal durch die Einbindung verschiedenster Plug-Ins die Webseiten komplexer werden und somit Stabilität und Performance darunter leiden. Ich denke aber, dass insbesondere das Placeholder-Attribut mit wenig Aufwand nachrüstbar ist. Ein paar Varianten möchte ich kurz vorstellen.

Standard Placehalter-Attribut in HTML5

Die folgende Codezeile zeigt das Placehalter-Attribut in der normalen Verwendung.

Placehalter-Attribut über einfachen Javascript-Befehl ergänzen

In der folgende Codezeile wird der Inhalt des Placehalter-Attributes als Value vorgeblendet. Über Javascript wird das Feld bei Focuserhalt geleert. Nachteil dieser Methode: Die Feldprüfung für Pflichtfelder wird komplexer, da Sie zwei Fälle prüfen müssen (leer bzw. Standardwert).

Placeholder-Attribut per CSS ergänzen

Hier ergänzen Sie den Platzhalter als Hintergrundbild. Nachteil: Für viele verschiedene Eingabefelder benötigen Sie jeweils verschiedene Hintergrundbilder. Das wird schnell aufwändig. Sinnvoll wäre es auch, die Hintergrundbilder in CSS-Sprites zusammenzufassen, um die Anzahl der Requests zu minimieren.

#Bsp3{
  background: url("../image/placeholder.gif") no-repeat scroll transparent; background-color:#fff;
  color:#666;
}
#Bsp3:focus, #Bsp3:active{
  background: none;
  background-color:#fff;
}

Placeholder-Attribut mit jQuery ergänzen

Hier erfolgt zuerst eine einfache Feature Detection, um zu ermitteln, ob der Browser das Placeholder-Attribut unterstützt. Wenn nicht - wird der Wert des Placeholder-Attributes als Value übernommen und über CSS mit der entsprechenden Farbe versehen. Beim Klick in das Feld wird alles wieder zurück gesetzt und beim Verlassen des Feldes (onBlur) wird der Placeholder wieder eingeblendet.

if (!('placeholder' in document.createElement('input'))) {
  if ($('#Bsp4').val() == '') {
    $('#Bsp4').css('color','#999');
    $('#Bsp4').val($('#Bsp4').attr('placeholder'));
  }
  $('#Bsp4').click(function() {
    if ($('#Bsp4').val() == $('#Bsp4').attr('placeholder')) {
      $('#Bsp4').css('color','#000');
      $('#Bsp4').val('');
    }
  });
  $('#Bsp4').blur(function() {
    if ($('#Bsp4').val() == '') {
      $('#Bsp4').css('color','#999');
      $('#Bsp4').val($('#Bsp4').attr('placeholder'));
    }
  });
};

Fazit

Wie Sie sehen, gibt es verschiedene Möglichkeiten, das Placeholder-Attribut nachzurüsten und es ist wie immer situationsabhängig, welche Methodik am Besten geeignet ist. Meine Empfehlung wäre die jQuery-Variante, da sie wirklich nur zum Einsatz kommt, wenn das Placeholder-Attribut vom gewählten Browser nicht unterstützt wird. Falls Sie kein jQuery verwenden (wollen), wäre für mich die CSS-Variante die zweite Wahl.

Hier finden Sie noch eine Auflistung, welche Browser aktuell das Placeholder-Attribut (nicht) unterstützen:
http://caniuse.com/input-placeholder

Tipps zur Webseitengestaltung - Blog