L'attributo tabindex
L'attributo tabindex imposta l'ordine
in cui gli elementi ricevono il focus
quando si naviga tra di essi utilizzando il tasto Tab.
Premendo questo tasto è possibile attivare sequenzialmente alcuni elementi della pagina (link ed elementi dei moduli). Gli elementi attivi riceveranno il focus di input.
Per i campi di input di tipo input
e textarea
il focus si manifesterà con il cursore
che lampeggia nel campo e la possibilità
di inserire testo, per
i link e altri elementi ciò
sarà un evidenziazione in qualche modo (sottolineatura,
bordo tratteggiato, ecc., dipende
dal browser).
Se nel momento in cui riceve il focus l'elemento non era visibile sulla pagina (a causa dello scorrimento), la pagina scorrerà fino a quell'elemento.
Se agli elementi non è assegnato l'attributo tabindex
o ha valore 0, la navigazione
su di essi con il tasto Tab avverà nell'ordine
di apparizione degli elementi nel codice HTML.
Se nella pagina sono presenti elementi a cui è assegnato
tabindex, inizialmente la navigazione
avverà su di essi, partendo dal valore minore
dell'attributo tabindex (il più piccolo
può essere uno) e così via in ordine crescente
dei valori dell'attributo, e quando questi elementi
finiranno - la navigazione proseguirà sugli elementi
a cui non è assegnato tabindex o che hanno
valore 0.
Il valore dell'attributo sono numeri interi da
1 all'infinito. Se alcuni
numeri sono saltati - non succederà nulla di grave
(ad esempio, se non c'è il numero 2,
prima il focus andrà sull'elemento con tabindex,
uguale a 1, e poi sull'elemento con tabindex,
uguale a 3).
Se sulla pagina al momento della pressione del tasto
Tab c'è un elemento in focus (il focus potrebbe
essere stato ottenuto non solo premendo Tab,
ma anche cliccando con il mouse sull'elemento o con l'attributo
autofocus),
allora la successiva pressione del tasto Tab porterà
al fatto che il focus sarà ottenuto dall'elemento successivo nell'ordine
dopo quello che è in focus (ad esempio,
se al momento è in focus l'elemento con tabindex
3, allora il prossimo a ricevere il focus sarà l'elemento
con tabindex 4).
Se a un campo di input è assegnato l'attributo disabled,
allora sarà ignorato dalla navigazione tramite
tasto Tab, anche se a questo campo è assegnato l'attributo
tabindex.
L'attributo tabindex si applica ai tag
a,
input,
textarea,
button,
select,
area.
Esempio
Assegniamo agli input
l'attributo tabindex. Premete sequenzialmente
il tasto Tab e vedrete
come il focus di input passerà dal primo
input al quarto, e poi proseguirà sui link
dall'inizio della pagina (poiché non ci sono più elementi
con l'attributo tabindex assegnato):
<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">
:
Vedi anche
-
lo pseudoclasse
focus,
che permette di modificare gli stili di un elemento quando è in focus
