Olaf Schneider: Linkliste mit Javascript-Scrollbar und Tab-Key beim IE

Beitrag lesen

Hallo,

ich ersetze mit Javascript normale <select>-Elemente durch <div>-Layer, die die <option>-Einträge als Linkliste enthalten. Der <div>-Layer hat eine Maximalhöhe. Ist die Höhe der Linkliste größer, so wird ein Slider eingeblendet, der als Scrollbar dient.

Mit verschiedenen Events sorge ich dafür, dass die Benutzung von Mausscrollrad und Pfeiltasten möglichst nah am <select>-Element ist.

Da einige User erkennen werden, dass es sich ja in Wirklichkeit um eine Linkliste handelt, werden sie vielleicht auf die Idee kommen, mit der Tab-Taste zu navigieren.

Springt der User vom letzten noch sichtbaren Link mit der Tab-Taste zum nächsten Link, weiß der Slider davon erst einmal nichts und der Browser scrollt nicht die Linkliste, sondern den <div>-Container inklusive Slider nach oben. Hässlich …

Das Problem konnte ich in Firefox und Safari durch ein onfocus-Event beheben, welches vor dem Springen den Slider anweist, die Linkliste so zu scrollen, dass der zu fokussierende Link sichtbar ist. Geht …

Das Problem ist – wer hat’s schon erraten – der IE, der onfocus (und scheinbar auch onbeforefocus)  _nach_ der Darstellung feuert, wo der Browser schon sein Unheil angerichtet hat. Problem …

Folgende Dinge könnte ich tun:

· Tab und Shift-Tab direkt per onkeypress abfangen, händisch per js das nächste zu fokussierende Element herausfinden, dieses Fokussieren und den Event stoppen. Diesen Aufwand würde ich gerne vermeiden.

· mittels tabindex="-1" die Funktion verhindern. Auch wenn der Benutzer noch über die Pfeiltasten navigieren kann, finde ich das trotzdem nicht die feine Art.

Gibt es andere, einfachere Möglichkeiten, das Problem zu lösen, sprich, den IE vor der Fokussierung eines Elementes Javascriptcode ausführen zu lassen?

(Anmerkung: Die Diskussion, ob man Formularelemente überhaupt nachbauen sollte, möchte ich hier gerne vermeiden.)

Gruß
Olaf