Atributas tabindex

Atributas tabindex nustato fokusavimo tvarką pereinant tarp elementų naudojant klavišą Tab.

Spaudžiant šį klavišą galima nuosekliai aktyvinti kai kuriuos puslapio elementus (nuorodas ir formų elementus). Akrtyvūs elementai gaus įvesties fokusą.

Įvesties laukeliams, kurių tipas input ir textarea fokuse reikš, kad laukelyje mirksės žymeklis ir į jį bus galima įvesti tekstą, nuorodoms ir kitiems elementams tai bus kažkaip paryškinama (pabraukimas, brūkšninio rėmelio apvadas ir pan., priklauso nuo naršyklės).

Jeigu fokusą gaunant elementas nebuvo matomas puslapyje (dėl slinkimo), tai puslapis bus paslinktas prie to elemento.

Jei elementams nenustatytas atributas tabindex arba jis turi reikšmę 0, tai perėjimas juose klavišu Tab vyks elementų sekos HTML kode tvarka.

Jei puslapyje yra elementų, kuriems nustatytas tabindex, tai pirmiausia perėjimas bus juose, pradedant nuo mažesnės atributo tabindex reikšmės (mažiausia gali būti vienetas) ir taip toliau didėjant atributo reikšmėms, o kai tokie elementai baigsis - perėjimas vyks tais elementais, kuriems nenustatytas tabindex arba jis turi reikšmę 0.

Atributo reikšmė yra sveikieji skaičiai nuo 1 iki begalybės. Jei kai kurie numerai praleisti - nieko baisaus neatsitiks (pavyzdžiui, jei nėra numerio 2, tai pirmiausia fokusas pateks į elementą su tabindex, lygiu 1, o po to į elementą su tabindex, lygiu 3).

Jei puslapyje spaudžiant klavišą Tab yra elementas fokuse (fokusas galėjo būti gautas ne tik spaudžiant Tab, bet ir paspaudus pelės klavišu ant elemento arba atributu autofocus), tai sekantis klavišo Tab paspaudimas sukels tai, kad fokusą gaus sekantis pagal tvarką elementas po to, kuris yra fokuse (pavyzdžiui, jei dabar fokuse yra elementas su tabindex 3, tai sekantį fokusą gaus elementas su tabindex 4).

Jei įvesties laukui nustatytas atributas disabled, tai jis bus ignoruojamas perėjimų per klavišą Tab, net jei šiam laukui nustatytas atributas tabindex.

Atributas tabindex taikomas žymoms a, input, textarea, button, select, area.

Pavyzdys

Suteikime įvesties laukams atributą tabindex. Paspauskite nuosekliai klavišą Tab ir pamatysite, kaip įvesties fokusas pereis nuo pirmojo įvesties lauko prie ketvirto, o po to eis per nuorodas nuo puslapio pradžios (nes daugiau elementų su nustatytu atributu tabindex nėra):

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

Taip pat žiūrėkite

pseudoklasė focus,
kuri leidžia keisti elemento stilius fokuse