Atrybut tabindex
Atrybut tabindex ustawia kolejność
uzyskiwania fokusu przy przechodzeniu między elementami
za pomocą klawisza Tab.
Naciskając ten klawisz można aktywować kolejno niektóre elementy strony (linki i elementy formularzy). Aktywne elementy będą otrzymywać fokus.
Dla pól wprowadzania typu input
i textarea
fokus będzie wyrażał się tym, że w polu
będzie migał kursor i będzie można do niego
wprowadzać tekst, dla
linków i innych elementów będzie to
podświetlenie w jakiś sposób (podkreślenie,
obramowanie przerywaną linią itp., zależy
od przeglądarki).
Jeśli w momencie uzyskania fokusu element nie był widoczny na stronie (z powodu przewijania), to strona przewinie się do tego elementu.
Jeśli elementom nie nadano atrybutu tabindex
lub ma on wartość 0, to przechodzenie
po nich klawiszem Tab będzie odbywać się w kolejności
występowania elementów w kodzie HTML.
Jeśli na stronie znajdują się elementy, którym nadano
tabindex, to najpierw przejście będzie
się odbywać po nich, zaczynając od mniejszej wartości
atrybutu tabindex (najmniejszą wartością
może być jeden) i tak dalej według rosnących
wartości atrybutu, a gdy takie elementy
się skończą - przejście pójdzie po tych elementach,
którym nie nadano tabindex lub ma on
wartość 0.
Wartością atrybutu są liczby całkowite od
1 do nieskończoności. Jeśli jakieś
numery są pominięte - nic strasznego się nie stanie
(na przykład, jeśli nie ma numeru 2, to
najpierw fokus trafi na element z tabindex,
równym 1, a potem na element z tabindex,
równym 3).
Jeśli na stronie w momencie naciśnięcia klawisza
Tab znajduje się element w fokusie (fokus mógł
zostać uzyskany nie tylko przez naciśnięcie Tab,
ale także przez kliknięcie myszką w element lub atrybutem
autofocus),
to następne naciśnięcie klawisza Tab spowoduje,
że fokus uzyska następny w kolejności
element po tym, który jest w fokusie (na przykład,
jeśli obecnie w fokusie jest element z tabindex
3, to następny uzyska fokus element
z tabindex 4).
Jeśli polu wprowadzania nadano atrybut disabled,
to będzie ono ignorowane przy przechodzeniu przez
klawisz Tab, nawet jeśli temu polu nadano atrybut
tabindex.
Atrybut tabindex stosuje się do tagów
a,
input,
textarea,
button,
select,
area.
Przykład
Nadajmy inputom
atrybut tabindex. Naciśnijcie
kolejno klawisz Tab a zobaczycie,
jak fokus będzie przechodził od pierwszego
inputa do czwartego, a potem pójdzie po linkach
od początku strony (ponieważ nie ma więcej elementów
z nadanym atrybutem tabindex):
<input type="text" tabindex="3" placeholder="number: 3">
<input type="text" tabindex="1" placeholder="number: 1">
<input type="text" tabindex="2" placeholder="number: 2">
<input type="text" tabindex="4" placeholder="number: 4">
:
Zobacz też
-
pseudoklasa
focus,
która pozwala zmieniać style elementu w fokusie
