Do czego służy tabindex
atrybut w HTML?
tabindex
jest globalnym atrybutem odpowiedzialnym za dwie rzeczy:
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>
<div tabindex>
również działa. Czy istnieje powód, aby tego nie używać?-1
nie 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.-1
koniec 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.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:
źródło
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.
Że
tabindex
zaczyna 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 zatabindex
to32767
. Jeśli elementy mają to samo,tabindex
tabindex 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
tabindex
z-1
niej usunie element i nigdy nie będzie aktywowana ale ostrości może być podana do elementu programowo przy użyciuelement.focus()
.Jeśli określisz
tabindex
atrybut bez wartości lub pustą wartość, zostanie on zignorowany.Jeśli
disabled
atrybut jest ustawiony na elemencie, który matabindex
, element zostanie zignorowany.Jeśli a
tabindex
jest 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 zdefiniowanetabindex
, kolejność tabulatorów rozpocznie się od elementu który jest wyraźnie przypisany najniższejtabindex
wartości powyżej 0. Następnie przejdzie przez zdefiniowane elementy i dopiero po przejściutabindex
elementó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
jest taki sam jak
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 ..ponieważ nie trzeba jawnie definiować tabIndex, jeśli jest to zachowanie domyślne.
div
Domyślnie nie będzie aktywowana, gdyanchor
tagi.źródło
tabindex
na 1 zamiast 0 ?tabindex
zaczyna się od 0”, a następnie mówiąc „kolejność tabulatorów rozpocznie się od elementu, któremu wyraźnie przypisano najniższątabindex
wartość powyżej 0” .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
źródło
:focus
)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
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
źródło
Można go użyć do zmiany domyślnej sekwencji nawigacji fokusu elementu formularza.
Więc jeśli masz:
za pomocą klawisza tab poruszasz się po A-> B-> C. Tabindex pozwala zmienić ten przepływ.
źródło
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
źródło
W prostych słowach
tabindex
służy do skupiania się na elementach. Składniatabindex="numeric_value"
tonumeric_value
jest ciężar elementu. Najpierw będzie dostępna niższa wartość.źródło
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.
źródło
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
źródło