Jak zignorować element HTML z tabindex?

361

Czy jest jakikolwiek sposób w HTML, aby powiedzieć przeglądarce, że nie zezwala na indeksowanie tabulatorów dla poszczególnych elementów?

Na mojej stronie jest jednak pokazany w jQuery pokaz slajdów, gdy przechodzisz przez niego, dostajesz dużo naciśnięć tabulatorów, zanim formant przejdzie do następnego widocznego łącza na stronie, ponieważ wszystkie rzeczy, które są tabulowane, są ukryte użytkownik wizualnie.

html tabindex Tom Gullen
źródło

Odpowiedzi:

591

Możesz użyć tabindex="-1".

Specyfikacja HTML3 W3C obsługuje tabindexwartości ujemne :

Jeśli wartość jest ujemną liczbą całkowitą
Agent użytkownika musi ustawić flagę fokusu tabindex elementu, ale nie powinien umożliwiać dostępu do elementu za pomocą nawigacji sekwencyjnej.

Uważaj jednak, że jest to funkcja HTML5 i może nie działać ze starymi przeglądarkami.
Aby być zgodnym ze standardem W3C HTML 4.01 (od 1999) , tabindex musiałby być dodatni.

Przykładowe użycie poniżej w czystym HTML.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />
Rozwiń fragment kodu

Martin Hennings
źródło
12
Wygląda na to, że Google Chrome nie obsługuje -1, co ma sens, ponieważ technicznie tabIndex obsługuje tylko 0 -32767 według linkuW3 . Więc kiedy to zrobiłem; Użyłem 500. Hackish; ale działało.
Flea
38
@Flea Począwszy od wersji 23, Google Chrome obsługuje -1 na tabindex. Nie jestem pewien, jak dawno to się stało, być może przed 23. Testowałem „-1” w Chrome 23, Firefox 18, IE8, IE9 i Opera 12.11 i działało to na wszystkich platformach.
jkupczak
5
Zredagowałem odpowiedź na link do zaktualizowanej specyfikacji HTML5. tabindexteraz pozwala mieć wartości ujemne.
James Donnelly,
1
@JamesDonnelly Dziękujemy za edycję. Ponownie dodałem odniesienie do specyfikacji W3C HTML4 w celu uzyskania zgodności przeglądarki.
Martin Hennings
2
Obsługiwane od IE 5.01 msdn.microsoft.com/en-us/library/ie/ms534654(v=vs.85).aspx
Skurpi
121

Nie zapominaj o tym, chociaż tabindexw specyfikacji i kodzie HTML wszystkie litery są małe, w JavaScript / DOM ta właściwość jest wywoływana tabIndex.

Nie trać rozumu, próbując dowiedzieć się, dlaczego wywoływane przez programowo zmienione indeksy kart element.tabindex = -1nie działają. Zastosowanie element.tabIndex = -1.

Eric L.
źródło
34
Wydaje się, że powinien to być komentarz, a nie odpowiedź.
DrCord,
47
Ech, z przyjemnością to przeczytałem i prawdopodobnie przegapiłbym to, gdyby został pochowany jako komentarz.
MalcolmOcean
10

Jeśli są to elementy naturalnie w kolejności tabulatorów, takie jak przyciski i zakotwiczenia, usunięcie ich z kolejności tabulatorów za pomocą tabindex = -1 jest rodzajem zapachu dostępności. Jeśli zapewniają zduplikowaną funkcjonalność, usunięcie ich z kolejności kart jest w porządku i rozważ dodanie aria-hidden = true do tych elementów, aby technologie pomocnicze je zignorowały.

Matt
źródło
8

Jeśli pracujesz w przeglądarce, która nie obsługuje tabindex="-1", być może uda ci się uciec od podania rzeczy, które wymagają pominięcia, na bardzo wysokim indeksie tabulatorów . Na przykład tabindex="500"zasadniczo przesuwa kolejność tabulatorów obiektu na koniec strony.

Zrobiłem to dla długiego formularza wprowadzania danych z przyciskiem w środku. To nie jest przycisk, który ludzie często klikają, więc nie chciałem, aby przypadkowo przechodzili do niego i nacisnęli Enter. disablednie zadziałałoby, ponieważ to przycisk.

Jemmeh
źródło
5

Taki hack jak „tabIndex = -1” nie działa dla mnie w Chrome v53.

To działa dla Chrome i większości przeglądarek:

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>
Rozwiń fragment kodu

Val
źródło
Czy to nie po prostu przypisuje domyślnego indeksu tabulacji do elementu, a nie wyłącza tabulator?
Lawyerson
@ Prawnik nie, tak naprawdę wyłącza tabulatory, ponieważ sam wyjaśnił „removeAttribute”. próbowałeś, ale z innym rezultatem?
Val
2
Próbowałem bezskutecznie. Przeglądarki domyślnie pozwalają tabulować dane wejściowe w kolejności, w jakiej pojawiają się na stronie, nawet jeśli nie ustawiono na nich tabindex, więc dla mnie sensowne jest tylko to, że po prostu usunięcie atrybutu nie wyłącza całkowicie tabulacji. Ponadto dane wejściowe, których chcę użyć, nie mają na początku atrybutu „tabindex”.
Lawyerson
Uruchamiając fragment kodu, mogę przejść do notabindexpola tak, jak tabIndex=5po naciśnięciu przycisku. Nie jest to kwestia burmistrza, ale nadal nie sprawia, że ​​nie można go całkowicie „zakasować”.
Mikael Dúi Bolinder
Prawdopodobnie nie działa, ponieważ używasz futerału wielbłąda. Wszystko powinno być tabindex
pisane
3

Sposobem na to jest dodanie tabindex="-1". Dodanie tego do konkretnego elementu powoduje, że nawigacja za pomocą klawiatury staje się nieosiągalna . Jest tutaj świetny artykuł , który pomoże ci lepiej zrozumieć tabindex .

Nesha Zoric
źródło
2

Po prostu dodaj atrybut disableddo elementu (lub użyj jQuery, aby zrobić to za Ciebie). Wyłączone zapobiega w ogóle skupieniu lub wybraniu wejścia.

Yaakov Ainspan
źródło
Która wersja Chrome?
Yaakov Ainspan
Chrome 49.0.2623.75 (64-bitowy).
Felix Eve
Moja wersja to 51.0.2704.103. Sprawdź to skrzypce . Możesz mieć zły kod, nigdy nie wiadomo.
Yaakov Ainspan
@AtulChaudhary, jak to nie działa? Nadal możesz to ustawić?
Yaakov Ainspan
kiedy pola są wyłączone, pozostają wyłączone i jest to problem w IOS9, ale wydaje się, że działa w IOS10
Atul Chaudhary