Co to jest atrybut tabindex HTML?

229

Do czego służy tabindexatrybut w HTML?

spać
źródło

Odpowiedzi:

301

tabindexjest globalnym atrybutem odpowiedzialnym za dwie rzeczy:

  1. ustala kolejność elementów, na których można ustawić ostrość i
  2. to sprawia, że elementy „aktywowana” .

Moim zdaniem druga rzecz jest nawet ważniejsza niż pierwsza. Istnieje bardzo niewiele elementów, które można ustawić domyślnie (np. <a> i formanty formularza). Programiści bardzo często dodają programy obsługi zdarzeń JavaScript (takie jak „onclick”) do elementów, na których nie można ustawić ostrości (<div>, <span> itd.), A także sposób, aby interfejs reagował nie tylko na zdarzenia myszy, ale także na zdarzenia klawiatury (np. „onkeypress”) ma umożliwić koncentrację takich elementów. Na koniec, jeśli nie chcesz ustawiać kolejności, a po prostu spraw, aby twój element mógł być aktywny tabindex="0"na wszystkich takich elementach:

<div tabindex="0"></div>

Ponadto, jeśli nie chcesz, aby można go było ustawić za pomocą klawisza tab, użyj tabindex="-1". Na przykład poniższy link nie będzie się skupiał podczas przechodzenia za pomocą klawiszy tabulacji.

<a href="#" tabindex="-1">Tab key cannot reach here!</a>
Konstantin Smolianin
źródło
2
Dowiedziałem się, że to <div tabindex>również działa. Czy istnieje powód, aby tego nie używać?
danijar
5
Używanie tabindex -1 jest wygodne dla takich rzeczy jak pomijanie linków. Możesz utworzyć link do elementu bezpośrednio nad treścią, do której próbujesz powiązać użytkownika, bez możliwości uzyskania dostępu do samego elementu.
Brett
4
Warto zauważyć - i odpowiedź powinna być prawdopodobnie poprawiona - że wartość -1nie jest odpowiednia, gdy „nie chcesz, aby była ona skoncentrowana”, ale raczej, gdy chcesz zapobiec skupianiu w wyniku nawigacji za pomocą klawiatury. Element nadal może być skupiony, ale nie za pomocą klawiatury.
AMN
2
@danijar yes: jest to naruszenie specyfikacji. Według html.spec.whatwg.org/multipage/… , „Atrybut tabindex, jeśli jest określony, musi mieć wartość, która jest prawidłową liczbą całkowitą” .
Mark Amery
To -1koniec moich badań nad rozwiązaniem dla przedmiotów, które miały absolutną pozycję i zachowywały się zabawnie, gdy były skupione na zakładce! HOorraaayyyyy.
John Mutuma
54

Gdy użytkownik naciśnie przycisk tab, użytkownik przejdzie przez formularz w kolejności 1, 2 i 3, jak wskazano w poniższym przykładzie.

Na przykład:

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />
Robert
źródło
-> Co jeśli tabindex ma wartość -1? Co to znaczy?
7
@AlyssaGono, chyba nie przeczytałeś odpowiedzi z 85 głosami upvotes ... tabindex z -1 oznacza, że ​​nie możesz dotrzeć do tego elementu po naciśnięciu klawisza tab
John Ruddell
24

The służy do zdefiniowania sekwencji, którą użytkownicy postępują, gdy używają klawisza Tab do poruszania się po stronie. Domyślnie naturalna kolejność tabulacji będzie zgodna z kolejnością źródłową w znacznikach.

Atrybut zawartości tabindex pozwala autorom kontrolować, czy element ma być aktywny, czy powinien być osiągalny za pomocą nawigacji sekwencyjnej, a także jaka jest względna kolejność elementu na potrzeby nawigacji sekwencyjnej. Nazwa „indeks tab” pochodzi od powszechnego używania klawisza „tab” do poruszania się po elementach, na których można ustawić ostrość. Termin „tabulacja” odnosi się do przechodzenia do przodu przez elementy, które można ustawiać, do których można uzyskać dostęp za pomocą nawigacji sekwencyjnej.
Zalecenie W3C: HTML5
Sekcja 7.4.1 Nawigacja sekwencyjna i atrybut tabindex

Że tabindexzaczyna się od 0 lub dowolna, dodatnia liczba całkowita i przyrosty w górę. Jest to często można zauważyć wartość 0 unikać, ponieważ w starszych wersjach Mozilli i czyli tabindex ruszy na 1, przechodzimy do 2, a dopiero po 2 byłoby udać się do 0, a następnie 3. Maksymalna wartość całkowita za tabindexto 32767. Jeśli elementy mają to samo, tabindextabindex dopasuje kolejność źródeł w znacznikach. Ujemna wartość usunie element z indeksu tabulatorów, więc nigdy nie będzie się skupiał.

Jeśli jest przypisany element tabindexz -1niej usunie element i nigdy nie będzie aktywowana ale ostrości może być podana do elementu programowo przy użyciu element.focus().

Jeśli określisz tabindexatrybut bez wartości lub pustą wartość, zostanie on zignorowany.

Jeśli disabledatrybut jest ustawiony na elemencie, który ma tabindex, element zostanie zignorowany.


Jeśli a tabindexjest ustawione w dowolnym miejscu na stronie, niezależnie od tego, gdzie jest w stosunku do reszty kodu (może być w stopce, w obszarze zawartości, gdziekolwiek), jeśli jest zdefiniowane tabindex, kolejność tabulatorów rozpocznie się od elementu który jest wyraźnie przypisany najniższej tabindexwartości powyżej 0. Następnie przejdzie przez zdefiniowane elementy i dopiero po przejściu tabindexelementów wyraźnych wróci do początku dokumentu i będzie postępował zgodnie z naturalną kolejnością tabulatorów.


W specyfikacji HTML4 tylko następujące elementy obsługują atrybut tabindex: , , , , , , i . Ale specyfikacja HTML5, mając na uwadze dostępność, umożliwia przypisanie wszystkich elementów tabindex.

-

Na przykład

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

jest taki sam jak

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

ponieważ bez względu na to, że wszyscy są przydzieleni tabindex="1", nadal będą postępować w tej samej kolejności, pierwszy jest pierwszy, a ostatni ostatni. To jest również to samo ..

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

ponieważ nie trzeba jawnie definiować tabIndex, jeśli jest to zachowanie domyślne. divDomyślnie nie będzie aktywowana, gdy anchortagi.

Davidcondrey
źródło
Jakie wersje IE oraz Mozilla rozpocząć tabindexna 1 zamiast 0 ?
arminrosu,
-1; ta odpowiedź jest trochę zagmatwana. Wspominasz, że „starsze wersje” IE i Firefox mają tabulację zaczynającą się od tabindex 1 zamiast tabindex 0 ... ale tak właśnie robią wszystkie przeglądarki, zgodnie z wymaganiami specyfikacji! Zaprzeczasz także sobie, mówiąc najpierw tabindexzaczyna się od 0”, a następnie mówiąc „kolejność tabulatorów rozpocznie się od elementu, któremu wyraźnie przypisano najniższą tabindexwartość powyżej 0” .
Mark Amery
18

Kontrolowanie kolejności tabulacji (naciśnięcie tabklawisza, aby przenieść fokus) na stronie.

Odniesienie: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

Tomek
źródło
6
Ponadto użycie tabindex umożliwia wybranie elementu za pomocą kliknięcia myszą. (Dodaje kropkowane kontury, można je stylizować :focus)
user123444555621
@ Pumbaa80 Możesz wybrać dowolny element wejściowy i tak klikając myszą, to samo dotyczy CSS „: focus”. Atrybut tabindex jest opcjonalny.
Drew
6
Dotyczy to tylko elementów wejściowych. Mój komentarz dotyczy każdego rodzaju elementu. Zobacz jsfiddle.net/XsYCj dla przykładu.
user123444555621
8

ustawione wartości określają kolejność, w jakiej fokus klawiatury będzie się przemieszczał między elementami witryny.

W poniższym przykładzie, po pierwszym naciśnięciu klawisza, kursor przejdzie do #foo, następnie #awesome, a następnie #bar

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

Jeśli nigdzie nie zdefiniowano indeksów tabulatorów, fokus klawiatury będzie podążał za znacznikami HTML strony w kolejności, w jakiej są one zdefiniowane w dokumencie HTML.

Jeśli tabulujesz więcej razy niż określiłeś tabindexy, fokus przesunie się tak, jakby nie było tabindexów, tj. W kolejności wyświetlania znaczników HTML

Eldamir
źródło
3

Można go użyć do zmiany domyślnej sekwencji nawigacji fokusu elementu formularza.

Więc jeśli masz:

text input A

text input B

submit button C

za pomocą klawisza tab poruszasz się po A-> B-> C. Tabindex pozwala zmienić ten przepływ.

Cherouvim
źródło
3

Zwykle, gdy użytkownik przechodzi z pola do pola w formie (w przeglądarce, która umożliwia tabulowanie, nie wszystkie przeglądarki tak robią), kolejność jest taka, w jakiej pola pojawiają się w kodzie HTML.

Czasami jednak chcesz, aby kolejność kart przebiegała nieco inaczej. W takim przypadku możesz numerować pola za pomocą TABINDEX. Karty następnie przepływają w kolejności od najniższego TABINDEX do najwyższego.

Więcej informacji na ten temat można znaleźć tutaj w3

inną dobrą ilustrację można znaleźć tutaj

Mulki
źródło
2

W prostych słowach tabindexsłuży do skupiania się na elementach. Składnia tabindex="numeric_value" to numeric_valuejest ciężar elementu. Najpierw będzie dostępna niższa wartość.

Aman Dhanda
źródło
„Najpierw uzyskamy dostęp do niższej wartości”. - niezupełnie prawda; 0 i wartości ujemne mają specjalne znaczenie.
Mark Amery
1

Atrybut tabindex HTML odpowiada za wskazanie, czy element jest osiągalny poprzez nawigację za pomocą klawiatury . Gdy użytkownik naciśnie klawisz Tab nacisk zostanie przesunięty z jednego elementu na drugi. Przy użyciu atrybutu tabindex przepływ kolejności tabulatorów jest przesuwany.

Nesha Zoric
źródło
0

Tabulowanie formantów zwykle odbywa się sekwencyjnie, gdy pojawiają się w kodzie HTML.

Przy użyciu tabindex tabulacja będzie płynąć od kontroli z najniższym tabindex do kontrolki o najwyższym tabindex w kolejności sekwencyjnej tabindex

Kamal
źródło