: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.
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: