Atribuut tabindex

Atribuut tabindex määrab fookuse saamise järjekorra elementide vahel liikumisel klahvi Tab abil.

Selle klahvi vajutades saab järjestikku aktiveerida mõnda lehe elementi (lingid ja vormide elemendid). Aktiivsed elemendid saavad sisendfookuse.

Sisendväljade tüübiga input ja textarea väljendub fookus selles, et väljas vilgub kursor ja sinna saab teksti sisestada, linkide ja teiste elementide puhul see on mingil viisil esiletõstmine (allakriipsutamine, katkendjoonega piirjoon jne, sõltub brauserist).

Kui fookuse saamise hetkel polnud element lehel nähtav (kerimise tõttu), kerib leht selle elemendi juurde.

Kui elementidele pole atribuuti tabindex määratud või selle väärtus on 0, siis nende vahel liikumine klahviga Tab toimub elementide järjekorras HTML koodis.

Kui lehel on elemente, kellele on määratud tabindex, siis kõigepealt liigutakse nende vahel, alustades väiksemast atribuudi tabindex väärtusest (kõige väiksem võib olla üks) ja nii edasi vastavalt atribuudi väärtuste kasvule, ning kui sellised elemendid saavad otsa - liigutakse nende elementide vahel, kellele pole tabindex määratud või selle väärtus on 0.

Atribuudi väärtuseks on täisarvud 1 kuni lõpmatuseni. Kui mõned numbrid on vahele jäetud - ei juhtu midagi hullu (näiteks kui numbrit 2 pole, siis kõigepealt satub fookus elemendile, mille tabindex väärtus on 1, ja seejärel elemendile, mille tabindex väärtus on 3).

Kui lehel klahvi Tab vajutamise hetkel on element fookuses (fookuse võidi saada mitte ainult Tab vajutamisel, vaid ka hiireklõpsuga elemendil või atribuudiga autofocus), siis järgmine klahvi Tab vajutus viib selleni, et fookuse saab järgmine elemendi järel olev element (näiteks kui praegu on fookuses element, mille tabindex väärtus on 3, siis järgmiseks saab fookuse element mille tabindex väärtus on 4).

Kui sisendväljale on määratud atribuut disabled, siis see ignoreeritakse klahvi Tab kaudu liikumisel, isegi kui sellele väljale on määratud atribuut tabindex.

Atribuuti tabindex rakendatakse siltidele a, input, textarea, button, select.

Näide

Anname input väljadele atribuudi tabindex. Vajutage järjestikku klahvi Tab ja näete, kuidas sisendfookus liigub esimeselt input väljalt neljandale, ning seejärel liigub linkide juurde lehe algusest (kuna rohkem elemente määratud atribuudiga tabindex pole):

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

Vaata ka

pseudoklass focus,
mis võimaldab muuta fookuses oleva elemendi stiile