JavaScript/DOM/HTMLOrSVGElement/tabIndex

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Titel dieses Artikels ist mehrdeutig. Das Thema Tabindex wird in diesen Artikeln behandelt:



Das tabindex-Universalattribut ermöglicht mit Hilfe der Tabulator-Taste ( ) neben Verweisen, Buttons und input-Elementen beliebige Elemente einer HTML-Datei anzuspringen.

erlaubte Werte

ganze Zahl zwischen -1 und 32767

  • -1: Element ist nicht per Tabulator fokussierbar
  • 0: Element ist fokussierbar, Reihenfolge durch das Markup festgelegt
  • >0: Element ist fokussierbar, Reihenfolge durch das Attribut festgelegt
default-Wert 0
erlaubt in allen Elementen
Browsersupport Details bei caniuse.com: {{{caniuse}}}
Beispiel
<a tabindex="3" href="https://wiki.selfhtml.org/wiki/Startseite">
<a tabindex="1" href="https://blog.selfhtml.org/">
<a tabindex="2" href="https://forum.de.selfhtml.org/">
legt für die Links abweichende Tabindex-Einstellungen fest
Beachten Sie: Die Tabindizes beziehen sich stets auf das gesamte angezeigte Dokument. Dabei werden auch Formulare sowie Verweisbereiche in Grafiken und Objekten mit einbezogen. Wenn Sie außer normalen Verweisen auch solche Elemente in Ihrer Datei haben, sollten Sie die Tabulator-Reihenfolge für alle Elemente gemeinsam festlegen. Das bedeutet aber auch, dass es in den meisten Fällen sinnvoll ist, auf eine geänderte Tabulatorreihenfolge zu verzichten..

Siehe auch

Weblinks

Achtung: Der Sortierungsschlüssel „Tabindex“ überschreibt den vorher verwendeten Schlüssel „TabIndex“.

Die Eigenschaft tabIndex spiegelt den numerischen Wert des tabindex Attributs eines HTML- oder SVG-Elements wieder. Sie ermittelt oder ändert die Tabulator-Reihenfolge des Elements.

Ein tabIndex kann für HTML-, SVG- und MathML-Elemente gesetzt werden.

  • DOM 2.0
  • JavaScript 1.5
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera

Syntax

const index = element.tabIndex;

  • Die Eigenschaft gibt den Tabindex des Elements als Zahl zurück.

element.tabIndex = 7;

  • Der Tabindex des Elements wird auf 7 gesetzt. Sie können numerische Werte zuweisen, oder Strings, deren Inhalt ein korrekter numerischer Wert ist. Alles andere führt dazu, dass die Eigenschaft und das Attribut den Wert 0 annehmen.

Anwendungsbeispiel[Bearbeiten]

Beispiel ansehen …
    function changeTabIndex() {
      document.getElementById('1').tabIndex = 3;
      document.getElementById('2').tabIndex = 2;
      document.getElementById('3').tabIndex = 1;
    }

Durch einen Klick auf den Button wird die Funktion changeTabIndex aufgerufen, die die Tabindex-Reihenfolge der Links ändert.

Weblinks[Bearbeiten]

  • W3C: tabIndex
  • MDN: tabIndexAchtung: Der Sortierungsschlüssel „TabIndex“ überschreibt den vorher verwendeten Schlüssel „Tabindex“.