Das tabindex-Attribut
Das Attribut tabindex legt die Reihenfolge fest,
in der Elemente den Fokus erhalten, wenn mit der
Tab-Taste zwischen ihnen navigiert wird.
Durch Drücken dieser Taste können nacheinander bestimmte Elemente der Seite aktiviert werden (Links und Elemente von Formularen). Aktive Elemente erhalten den Eingabefokus.
Für Eingabefelder vom Typ input
und textarea
äußert sich der Fokus darin, dass im Feld
ein Cursor blinkt und Text eingegeben werden
kann. Bei Links
und anderen Elementen ist es
eine Hervorhebung auf irgendeine Weise (Unterstreichung,
Umrandung mit gepunkteter Linie usw., abhängig
vom Browser).
Wenn ein Element im Moment des Fokuserhalts nicht auf der Seite sichtbar war (wegen Scrollens), dann scrollt die Seite zu diesem Element.
Wenn Elementen kein tabindex-Attribut zugewiesen wurde
oder es den Wert 0 hat, dann erfolgt die Navigation
zu ihnen mit der Tab-Taste in der Reihenfolge
des Auftretens der Elemente im HTML-Code.
Wenn es auf der Seite Elemente gibt, denen ein
tabindex zugewiesen wurde, dann wird die Navigation
zuerst zu diesen erfolgen, beginnend mit dem kleinsten Wert
des tabindex-Attributs (der kleinste Wert
kann eins sein) und so weiter in aufsteigender
Reihenfolge der Attributwerte. Wenn solche Elemente
abgeschlossen sind, geht die Navigation zu den Elementen über,
denen kein tabindex zugewiesen wurde oder die
den Wert 0 haben.
Der Wert des Attributs sind ganze Zahlen von
1 bis unendlich. Wenn einige
Nummern ausgelassen wurden - passiert nichts Schlimmes
(zum Beispiel, wenn es keine Nummer 2 gibt, dann
erhält zuerst das Element mit tabindex
gleich 1 den Fokus, und dann das Element mit tabindex
gleich 3).
Wenn es auf der Seite im Moment des Drückens der
Tab-Taste ein Element im Fokus gibt (der Fokus konnte
nicht nur durch Drücken von Tab erhalten werden,
sondern auch durch Klicken mit der Maus auf das Element oder durch das Attribut
autofocus),
dann führt das nächste Drücken der Tab-Taste
dazu, dass das nächste Element in der Reihenfolge
nach demjenigen, das im Fokus ist, den Fokus erhält (zum Beispiel,
wenn sich aktuell das Element mit tabindex
3 im Fokus befindet, dann erhält als nächstes das Element
mit tabindex 4 den Fokus).
Wenn einem Eingabefeld das Attribut disabled
zugewiesen wurde, dann wird es bei der Navigation mit der
Tab-Taste ignoriert, selbst wenn diesem Feld das Attribut
tabindex zugewiesen wurde.
Das Attribut tabindex wird auf die Tags
a,
input,
textarea,
button,
select
angewendet.
Beispiel
Weisen wir den Inputs
das Attribut tabindex zu. Drücken Sie
nacheinander die Tab-Taste und Sie werden sehen,
wie der Eingabefokus vom ersten
Input zum vierten wechselt und dann den Links
auf der Seite von Beginn an folgt (da es keine weiteren Elemente
mit einem zugewiesenen tabindex-Attribut gibt):
<input type="text" tabindex="3" placeholder="number: 3">
<input type="text" tabindex="1" placeholder="number: 1">
<input type="text" tabindex="2" placeholder="number: 2">
<input type="text" tabindex="4" placeholder="number: 4">
:
Siehe auch
-
die Pseudoklasse
focus,
die das Ändern der Stile eines Elements im Fokus ermöglicht
