Wie ignoriere ich ein HTML-Element aus tabindex?

362

Gibt es in HTML eine Möglichkeit, den Browser anzuweisen, die Tab-Indizierung für bestimmte Elemente nicht zuzulassen?

Auf meiner Seite gibt es zwar eine Nebenschau, die mit jQuery gerendert wird. Wenn Sie diese durchblättern, werden Sie häufig auf die Tabulatoren gedrückt, bevor das Tabulatorsteuerelement zum nächsten sichtbaren Link auf der Seite wechselt, da alle Dinge, durch die die Tabulatoren geführt werden, ausgeblendet sind der Benutzer visuell.

html tabindex Tom Gullen
quelle

592

Sie können verwenden tabindex="-1".

Die W3C HTML5-Spezifikation unterstützt negative tabindexWerte:

Wenn der Wert eine negative Ganzzahl ist
Der Benutzeragent muss das tabindex-Fokusflag des Elements setzen, darf jedoch nicht zulassen, dass das Element mithilfe der sequentiellen Fokusnavigation erreicht wird.

Beachten Sie jedoch, dass dies eine HTML5-Funktion ist und möglicherweise nicht mit alten Browsern funktioniert.
Um mit dem W3C HTML 4.01-Standard (ab 1999) kompatibel zu sein, müsste tabindex positiv sein.

Beispielnutzung unten in reinem HTML.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />

Erweitern Sie das Snippet

Martin Hennings
quelle

12

Es scheint, dass Google Chrome -1 nicht unterstützt, was sinnvoll ist, da tabIndex technisch gesehen nur 0-32767 gemäß Link unterstütztW3 . Also, als ich das tat; Ich habe 500 verwendet. Hackish; aber funktioniert.

Floh

38

@Flea Ab Version 23 unterstützt Google Chrome -1 auf tabindex. Ich bin mir nicht sicher, wie lange das her ist, vielleicht vor 23. Ich habe "-1" in Chrome 23, Firefox 18, IE8, IE9 und Opera 12.11 getestet und es hat auf der ganzen Linie funktioniert.

jkupczak

5

Ich habe die Antwort bearbeitet, um auf die aktualisierte HTML5-Spezifikation zu verlinken. tabindexerlaubt jetzt negative Werte zu haben.

James Donnelly

1

@ JamesDonnelly Vielen Dank für Ihre Bearbeitung. Ich habe den Verweis auf die W3C HTML4-Spezifikation aus Gründen der Browserkompatibilität erneut hinzugefügt.

Martin Hennings

2

Unterstützt seit IE 5.01 msdn.microsoft.com/en-us/library/ie/ms534654(v=vs.85).aspx

Skurpi

121

Vergessen Sie nicht, dass diese Eigenschaft tabindexin Javascript / DOM aufgerufen wird , obwohl in den Spezifikationen und im HTML-Code alles in Kleinbuchstaben geschrieben ist tabIndex.

Verlieren Sie nicht den Verstand, um herauszufinden, warum das Aufrufen Ihrer programmgesteuert geänderten Tab-Indizes element.tabindex = -1nicht funktioniert. Verwenden Sie element.tabIndex = -1.

Eric L.
quelle

34

Dies scheint ein Kommentar zu sein, keine Antwort.

DrCord

47

Eh, ich war froh, es zu lesen, und ich hätte es wahrscheinlich verpasst, wenn es als Kommentar begraben worden wäre.

MalcolmOcean

10

Wenn dies natürlich Elemente in der Tab-Reihenfolge sind, wie Schaltflächen und Anker, ist das Entfernen aus der Tab-Reihenfolge mit tabindex = -1 eine Art Zugänglichkeitsgeruch. Wenn sie doppelte Funktionen bereitstellen, ist es in Ordnung, sie aus der Tabulatorreihenfolge zu entfernen. Fügen Sie diesen Elementen aria-hidden = true hinzu, damit unterstützende Technologien sie ignorieren.

Matt
quelle

8

Wenn Sie in einem Browser arbeiten, der dies nicht unterstützt tabindex="-1", können Sie möglicherweise davonkommen, indem Sie nur den Dingen, die übersprungen werden müssen, einen wirklich hohen Tabulatorindex geben . Verschiebt beispielsweise tabindex="500"die Registerkartenreihenfolge des Objekts grundsätzlich an das Ende der Seite.

Ich habe dies für ein langes Dateneingabeformular mit einem Knopf in der Mitte getan. Es ist keine Schaltfläche, auf die die Leute sehr oft klicken, also wollte ich nicht, dass sie versehentlich darauf klicken und die Eingabetaste drücken. disabledwürde nicht funktionieren, weil es ein Knopf ist.

Jemmeh
quelle

5

Ein solcher Hack wie "tabIndex = -1" funktioniert bei Chrome v53 nicht.

Dies funktioniert für Chrome und die meisten Browser:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}

<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

Erweitern Sie das Snippet

Val
quelle

Weist dies dem Element nicht einfach einen Standard-Registerkartenindex zu, anstatt das Tabbing zu deaktivieren?

Anwalt

@Lawyerson nein, es deaktiviert tatsächlich das Tabbing, da es selbst 'removeAttribute' erklärt. Haben Sie es versucht, aber mit einem anderen Ergebnis?

Val

2

Ich habe es ohne Wirkung versucht. Mit Browsern können Sie Eingaben standardmäßig in der Reihenfolge durchblättern, in der sie auf der Seite angezeigt werden, auch wenn kein Tabindex festgelegt ist. Daher ist es für mich nur sinnvoll, das einfache Entfernen des Attributs nicht vollständig zu deaktivieren. Darüber hinaus hat die Eingabe, die ich verwenden möchte, zunächst kein "tabindex" -Attribut.

Anwalt

notabindexWenn ich das Snippet ausführe, kann ich zu der Box wechseln, als hätte ich sie tabIndex=5nach dem Drücken der Taste. Keine Bürgermeisterfrage, aber dennoch nicht völlig "tabellarisch".

Mikael Dúi Bolinder

Es funktioniert wahrscheinlich nicht, weil Sie Kamelkoffer verwenden. Es sollte alles Kleinbuchstaben seintabindex

dman

3

Der Weg, dies zu tun, ist durch Hinzufügen tabindex="-1". Wenn Sie dies einem bestimmten Element hinzufügen, ist es für die Tastaturnavigation nicht mehr erreichbar . Es ist ein großer Artikel hier , die Sie weiter verstehen helfen tabindex .

Nesha Zoric
quelle

2

Fügen Sie einfach das Attribut disabledzum Element hinzu (oder verwenden Sie jQuery, um dies für Sie zu tun). Deaktiviert verhindert, dass der Eingang fokussiert oder überhaupt ausgewählt wird.

Yaakov Ainspan
quelle

Welche Version von Chrome?

Yaakov Ainspan

Chrome 49.0.2623.75 (64 Bit).

Felix Eve

Meine Version ist 51.0.2704.103. Schauen Sie sich diese Geige an . Möglicherweise haben Sie den falschen Code, Sie wissen es nie.

Yaakov Ainspan

@AtulChaudhary, wie funktioniert es nicht? Sie können es immer noch fokussieren?

Yaakov Ainspan

Sobald die Felder deaktiviert sind, bleiben sie deaktiviert und es ist ein Problem in IOS9, scheint aber in IOS10 zu funktionieren

Atul Chaudhary

Wie ignoriere ich ein HTML-Element aus tabindex?

Antworten: