Atribút tabindex
Atribút tabindex nastavuje poradie
získania fokusu pri prechode medzi prvkami
pomocou klávesu Tab.
Stlačením tohto klávesu je možné aktivovať postupne niektoré prvky stránky (odkazy a prvky formulárov). Aktívne prvky budú dostávať vstupný fokus.
Pre vstupné polia typu input
a textarea
sa fokus prejaví tým, že v poli
bude blikať kurzor a bude možné do neho
vpisovať text, pre
odkazy a iné prvky to
bude zvýraznenie nejakým spôsobom (podčiarknutie,
obkreslenie bodkovaným obrysom atď., závisí
od prehliadača).
Ak v čase získania fokusu prvok nebol viditeľný na stránke (kvôli posunu), stránka sa k tomuto prvku posunie.
Ak prvkom nie je nastavený atribút tabindex
alebo má hodnotu 0, prechod
medzi nimi klávesom Tab pôjde v poradí
usporiadania prvkov v HTML kóde.
Ak sú na stránke prvky, ktorým je nastavený
tabindex, najskôr prechod
pôjde po nich, začínajúc od menšej hodnoty
atribútu tabindex (najmenšou hodnotou
môže byť jednotka) a tak ďalej podľa rastúcich
hodnôt atribútu, a keď takéto prvky
skončia - prechod pôjde po tých prvkoch,
ktorým nie je nastavený tabindex alebo má
hodnotu 0.
Hodnotou atribútu sú celé čísla od
1 do nekonečna. Ak sú nejaké
čísla vynechané - nič hrozné sa nestane
(napríklad, ak nie je číslo 2, tak
najskôr fokus padne na prvok s tabindex,
rovným 1, a potom na prvok s tabindex,
rovným 3).
Ak je na stránke v čase stlačenia klávesu
Tab prvok v ohnisku (fokus mohol
byť získaný nielen stlačením Tab,
ale aj kliknutím myšou na prvok alebo atribútom
autofocus),
potom ďalšie stlačenie klávesu Tab povedie
k tomu, že fokus získa ďalší prvok v poradí
po tom, ktorý je v ohnisku (napríklad,
ak je teraz v ohnisku prvok s tabindex
3, tak ďalší získa fokus prvok
s tabindex 4).
Ak je vstupnému poľu nastavený atribút disabled,
bude ignorované prechodmi cez
kláves Tab, aj keď tomuto poľu je nastavený atribút
tabindex.
Atribút tabindex sa aplikuje na značky
a,
input,
textarea,
button,
select,
area.
Príklad
Nastavme inputom
atribút tabindex. Postupne stláčajte
kláves Tab a uvidíte,
ako sa vstupný fokus bude prenášať od prvého
inputu k štvrtému, a potom pôjde po odkazoch
od začiatku stránky (pretože ďalšie prvky
s nastaveným atribútom tabindex už nie sú):
<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">
:
Pozri tiež
-
pseudotrieda
focus,
ktorá umožňuje meniť štýly prvku v ohnisku
