Browserkompatibilität von "placeholder"
HTML5 bringt viele neue Attribute für input-Tags mit, darunter auch placeholder, womit in leeren Eingabefeldern ein Text angezeigt werden kann.
Diesen Platzhalter kann man zum Beispiel anstelle eines Labels nutzen. Spart Platz und sieht meistens gut aus, ist aber nicht mit allen Browsern kompatibel. Das ist natürlich ärgerlich, weil ein Benutzer dann nicht mehr erkennen kann, was er eigentlich in das Feld eingeben soll.
In den meisten Browsern funktioniert das sehr gut, der Internet Explorer versteht das Attribut jedoch erst ab Version 10, Opera Mini gar nicht. Da dies die Benutzbarkeit sehr beeinflusst, empfiehlt es sich, einen Workaround dafür in seine Seite einzubauen.
Auf der Suche nach einer Lösung habe ich zwar viele Codeschnipsel gefunden, aber mit keinem war ich recht zufrieden. Daher habe ich mir selbst etwas geschrieben, was das eigentliche Verhalten recht gut imitiert und nur dann genutzt wird, wenn der Browser keine Unterstützung für das placeholder-Attribut hat.
Den Code gibt es wie immer auf github zum Download. Eine Live-Demo kann man hier im Blog bei den Kommentaren sehen.