:focus für den Internet Explorer

Die Verwendung von :focus

Mit der Pseudoklasse :focus ist es möglich, Elementen ein verändertes Aussehen zu geben, wenn diese den Fokus haben. Dies ist z.B. dann der Fall, wenn Links innerhalb eines HTML-Dokuments mit der Tabulator-Taste "durchgesteppt" werden. Normalerweise wird der Link dann mit einer punktierten Umrandung dargestellt.

Diese Pseudoklasse ist allerdings nicht auf Links beschränkt. Innerhalb von Formularen z.B. können die verschiedenen Formularfelder (einzeilige und mehrzeilige Eingabefelder, Checkboxen, Radiobuttons, Auswahllisten und Klick-Buttons) mit dem Tabulator angewählt oder per Mausklick aktiviert werden und erhalten dann den Fokus. Die bei :focus definierten CSS-Eigenschaften werden dann auf das Element angewendet.

Die nachfolgenden vier Eingabefelder erhalten in Firefox, Mozilla, Opera und Safari bei der Aktivierung mit der Maus oder beim Wechsel mit dem Tabulator eine veränderte Hintergrundfarbe.

Formular mit :focus, funktioniert nicht im IE Feld 1:
Feld 2:
Feld 3:
Feld 4:

Die CSS-Definition hierfür ist:

  input:focus {
    background: #ccccff
  }
  

Leider funktioniert das nicht mit dem Internet Explorer und älteren Versionen des Konqueror, weil die Pseudoklasse :focus von diesen Browsern nicht unterstützt werden. Mit etwas Javascript kann man beide aber dazu bringen, :focus zu simulieren.

Nachhilfe im Internet Explorer

Javascript kennt die beiden Event-Handler onFocus() und onBlur(), die für die Simulation von :focus benötigt werden. Das Event onFocus wird ausgelöst, wenn der Anwender ein Element aktiviert. Das Ereignis onBlur tritt ein, wenn ein Element aktiviert war und verlassen wird.

Bei den Eingabefeldern in einem Formular werden zusätzlich beide Event-Handler wie folgt notiert:

  <input type="text" name="feld1" size="40"
         onFocus="this.style.background='#ccccff'"
         onBlur="this.style.background='#ffffff'">
  

Das Beispiel von oben funktioniert jetzt auch im Internet Explorer wie gewünscht:

Formular mit IE-Unterstützung Feld 1:
Feld 2:
Feld 3:
Feld 4: