Atributul tabindex
Atributul tabindex stabilește ordinea
în care elementele primesc focusul
la navigarea cu tasta Tab.
Apăsând această tastă, puteți activa secvențial unele elemente ale paginii (linkuri și elemente de formular). Elementele active vor primi focusul de intrare.
Pentru câmpurile de intrare de tip input
și textarea,
focusul se va exprima prin faptul că în câmp
va clipi cursorul și în el se va putea
introduce text, pentru
linkuri și alte elemente, acesta
va fi evidențiat într-un anumit mod (subliniere,
contur cu bordură punctată etc., depinde
de browser).
Dacă în momentul primirii focusului elementul nu a fost vizibil pe pagină (din cauza derulării), atunci pagina se va derula până la acel element.
Dacă elementelor nu li se atribuie atributul tabindex
sau acesta are valoarea 0, atunci navigarea
prin ele cu tasta Tab va urma ordinea
de apariție a elementelor în codul HTML.
Dacă pe pagină există elemente cărora li s-a atribuit
tabindex, atunci mai întâi navigarea va
trece prin ele, începând de la valoarea mai mică
a atributului tabindex (cea mai mică valoare
poate fi unu) și așa mai departe în ordine crescătoare
a valorilor atributului, iar când aceste elemente
se termină - navigarea va continua cu elementele
care nu au atribuit tabindex sau care au
valoarea 0.
Valoarea atributului sunt numere întregi de la
1 la infinit. Dacă unele numere
lipsesc - nu se va întâmpla nimic rău
(de exemplu, dacă nu există numărul 2,
atunci mai întâi focusul va ajunge pe elementul cu tabindex
egal cu 1, apoi pe elementul cu tabindex
egal cu 3).
Dacă pe pagină, în momentul apăsării tastei
Tab, există un element în focus (focusul a putut
fi obținut nu doar prin apăsarea tastei Tab,
ci și prin click cu mouse-ul pe element sau prin atributul
autofocus),
atunci următoarea apăsare a tastei Tab va duce
la faptul că focusul va fi obținut de următorul element în ordine
după cel care este în focus (de exemplu,
dacă acum în focus este elementul cu tabindex
3, atunci următorul care va primi focusul este elementul
cu tabindex 4).
Dacă unui câmp de intrare i se atribuie atributul disabled,
atunci acesta va fi ignorat la navigarea
cu tasta Tab, chiar dacă acestui câmp i s-a atribuit
tabindex.
Atributul tabindex se aplică tag-urilor
a,
input,
textarea,
button,
select,
area.
Exemplu
Să atribuim input-urilor
atributul tabindex. Apăsați succesiv
tasta Tab și veți vedea
cum focusul de intrare va trece de la primul
input la al patrulea, apoi va continua cu linkurile
de la începutul paginii (deoarece nu mai sunt elemente
cu atributul tabindex setat):
<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">
:
Vedeți și
-
pseudoclasa
focus,
care permite modificarea stilurilor elementului în focus
