Co to jest atrybut tabindex HTML?

Do czego służy tabindexatrybut w HTML?

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>

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"  />

The tabindexsł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: Kotwica, powierzchnia, przycisk, Wejście, obiekt, Wybierz, i textarea. 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.

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

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

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.

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

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ść.

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.

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