A tabindex attribútum

A tabindex attribútum meghatározza a fókusz sorrendjét a Tab billentyűvel történő navigáláskor.

Ezzel a billentyűvel egymás után aktiválhatók a weboldal bizonyos elemei (hivatkozások és űrlap elemek). Az aktív elemek kapják meg a beviteli fókuszt.

A input és textarea beviteli mezők esetében a fókusz azt jelenti, hogy a mezőben villog a kurzor, és szöveg gépelhető bele. A hivatkozásoknál és más elemeknél ez valamilyen módon történő kiemelés (aláhúzás, szaggatott keret stb., a böngészőtől függően).

Ha a fókuszt kapó elem nem volt látható az oldalon (görgetés miatt), akkor az oldal az elemhez görget.

Ha az elemeknek nincs tabindex attribútumuk, vagy az értéke 0, akkor a Tab billentyűvel történő navigálás az elemek HTML kódban való sorrendjében történik.

Ha az oldalon vannak olyan elemek, amelyeknek meg van adva a tabindex attribútum, akkor először ezeken megy végig a navigálás, kezdve a legkisebb attribútumértéktől (a legkisebb érték lehet 1), és így tovább a növekvő attribútumértékek szerint. Amikor ezek az elemek elfogynak, akkor a navigálás azon elemeken folytatódik, amelyeknek nincs tabindex attribútumuk, vagy az értéke 0.

Az attribútum értéke 1-től a végtelenig terjedő egész szám lehet. Ha néhány szám hiányzik - az nem jelent problémát (például, ha nincs 2-es szám, akkor először a tabindex=1 értékű elem kapja a fókuszt, majd a tabindex=3 értékű elem).

Ha az oldalon a Tab billentyű megnyomásakor van egy elem fókuszban (a fókuszt nem csak a Tab billentyűvel, hanem egérkattintással vagy a autofocus attribútummal is meg lehet kapni), akkor a Tab billentyű következő megnyomása azt eredményezi, hogy a fókuszt a fókuszban lévő elem utáni elem kapja meg (például, ha jelenleg a tabindex=3 értékű elem van fókuszban, akkor a következő a tabindex=4 értékű elem kapja a fókuszt).

Ha egy beviteli mező disabled attribútummal rendelkezik, akkor a Tab billentyűvel történő navigálás figyelmen kívül hagyja, még akkor is, ha a mezőnek meg van adva a tabindex attribútum.

A tabindex attribútum a következő elemekre alkalmazható: a, input, textarea, button, select, area.

Példa

Adjunk meg a input mezőknek tabindex attribútumot. Nyomja meg egymás után a Tab billentyűt, és látni fogja, hogyan megy a beviteli fókusz az első inputtól a negyedikig, majd folytatódik a hivatkozásokon az oldal elejétől (mivel nincs több elem megadott tabindex attribútummal):

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

Lásd még

a focus pszeudoosztály,
amely lehetővé teszi a fókuszban lévő elem stílusának módosítását