webentwicklung-frage-antwort-db.com.de

Wie ignoriere ich das HTML-Element von tabindex?

Gibt es in HTML eine Möglichkeit, dem Browser mitzuteilen, dass keine Registerkarten für bestimmte Elemente indiziert werden sollen?

Auf meiner Seite befindet sich jedoch eine mit jQuery gerenderte Diashow. Wenn Sie durch diese Registerkarte blättern, werden viele Tabulatoren gedrückt, bevor das Register auf den nächsten sichtbaren Link auf der Seite wechselt, da alle Elemente, für die ein Tabulator angezeigt wird, ausgeblendet sind der Benutzer visuell.

301
Tom Gullen

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

Die W3C HTML5-Spezifikation unterstützt negative tabindex-Werte:

Wenn der Wert eine negative ganze Zahl ist
Der Benutzeragent muss das Fokusindex-Flag des Elements setzen, sollte jedoch nicht zulassen, dass das Element über die sequenzielle Fokusnavigation erreicht wird.


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


Verwendungsbeispiel unten in reinem HTML.

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

487
Martin Hennings

Vergessen Sie nicht, auch wenn tabindex in den Spezifikationen und im HTML nur in Kleinbuchstaben angegeben ist, in Javascript / das DOM, dessen Eigenschaft tabIndex heißt.

Verlieren Sie nicht den Verstand und versuchen Sie herauszufinden, warum Ihre programmgesteuert geänderten Registerkennungen, die element.tabindex = -1 aufrufen, nicht funktionieren. Verwenden Sie element.tabIndex = -1.

91
Eric Lawler

Wenn sich diese Elemente in der Tabulatorreihenfolge befinden, z. B. Schaltflächen und Anker, ist das Entfernen dieser Elemente aus der Tabulatorreihenfolge mit tabindex = -1 eine Art Zugriffsgeruch. Wenn sie über doppelte Funktionen verfügen, ist das Entfernen aus der Tab-Reihenfolge in Ordnung, und Sie sollten den Elementen aria-hidden = true hinzufügen, damit sie von assistiven Technologien ignoriert werden.

8
Matt

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>

4
Val

Wenn Sie in einem Browser arbeiten, der tabindex="-1" nicht unterstützt, können Sie möglicherweise nur die Dinge angeben, die übersprungen werden sollen einen wirklich hohen Tabulatorindex . Beispielsweise verschiebt tabindex="500" die Tabulatorreihenfolge des Objekts an das Ende der Seite.

Ich habe dies für ein langes Dateneingabeformular gemacht, mit einem Knopf in der Mitte. Es ist kein Knopf, auf den die Leute oft klicken, also wollte ich nicht, dass sie aus Versehen darauf klicken und die Eingabetaste drücken. disabled würde nicht funktionieren, da es sich um eine Schaltfläche handelt.

4
Jemmeh

Fügen Sie einfach das Attribut disabled dem Element hinzu (oder verwenden Sie jQuery, um es für Sie auszuführen). Deaktiviert verhindert, dass die Eingabe fokussiert oder überhaupt ausgewählt wird.

1
Yaakov Ainspan

Dies erreichen Sie durch Hinzufügen von tabindex="-1". Indem Sie dies einem bestimmten Element hinzufügen, wird es durch die Tastaturnavigation zu unerreichbar. Es gibt einen großartigen Artikel hier , der Ihnen hilft, tabindex besser zu verstehen.

0
Nesha Zoric