Atribut tabindex
Atribut tabindex nastavuje pořadí
získání fokusu při přechodu mezi prvky
pomocí klávesy Tab.
Stiskem této klávesy lze aktivovat postupně některé prvky stránky (odkazy a prvky formulářů). Aktivní prvky obdrží vstupní fokus.
Pro vstupní pole typu input
a textarea
se fokus projeví tím, že v poli
bude blikat kurzor a bude možné do něj
zadávat text, u
odkazů a dalších prvků to
bude zvýraznění nějakým způsobem (podtržení,
obtažení tečkovaným okrajem atd., záleží
na prohlížeči).
Pokud v okamžiku získání fokusu prvek nebyl viditelný na stránce (kvůli posunutí), stránka se k tomuto prvku posune.
Pokud prvkům není nastaven atribut tabindex
nebo má hodnotu 0, přechod
mezi nimi klávesou Tab bude probíhat v pořadí
výskytu prvků v HTML kódu.
Pokud na stránce jsou prvky, kterým je nastaven
tabindex, pak nejprve přechod bude
probíhat po nich, počínaje od nejmenší hodnoty
atributu tabindex (nejmenší může být
jedna) a tak dále podle rostoucích hodnot
atributu, a když takové prvky
dojdou - přechod bude pokračovat po těch prvcích,
kterým není nastaven tabindex nebo má
hodnotu 0.
Hodnotou atributu jsou celá čísla od
1 do nekonečna. Pokud některá
čísla chybí - nic se nestane
(například, pokud chybí číslo 2, pak
nejprve fokus získá prvek s tabindex,
rovným 1, a pak prvek s tabindex,
rovným 3).
Pokud na stránce v okamžiku stisku klávesy
Tab je prvek ve fokusu (fokus mohl
být získán nejen stiskem Tab,
ale i kliknutím myší na prvek nebo atributem
autofocus),
pak další stisk klávesy Tab povede
k tomu, že fokus získá další prvek v pořadí
po tom, který je ve fokusu (například,
pokud je nyní ve fokusu prvek s tabindex
3, pak následně získá fokus prvek
s tabindex 4).
Pokud je vstupnímu poli nastaven atribut disabled,
bude ignorováno přechody pomocí
klávesy Tab, i když tomuto poli je nastaven atribut
tabindex.
Atribut tabindex se aplikuje na tagy
a,
input,
textarea,
button,
select.
Příklad
Pojďme inputům
nastavit atribut tabindex. Postupně mačkejte
klávesu Tab a uvidíte,
jak se vstupní fokus bude přepínat od prvního
inputu ke čtvrtému, a pak půjde po odkazech
od začátku stránky (protože více prvků
s nastaveným atributem tabindex není):
<input type="text" tabindex="3" placeholder="číslo: 3">
<input type="text" tabindex="1" placeholder="číslo: 1">
<input type="text" tabindex="2" placeholder="číslo: 2">
<input type="text" tabindex="4" placeholder="číslo: 4">
:
Viz také
-
pseudotřída
focus,
která umožňuje měnit styly prvku ve fokusu
