Atributo tabindex
O atributo tabindex define a ordem
de recebimento do foco ao navegar entre elementos
usando a tecla Tab.
Ao pressionar esta tecla, é possível ativar sequencialmente alguns elementos da página (links e elementos de formulários). Os elementos ativos receberão o foco de entrada.
Para campos de entrada do tipo input
e textarea,
o foco se expressará pelo cursor piscando no campo
e pela possibilidade de
inserir texto nele; para
links e outros elementos, isso
será uma destaque de alguma forma (sublinhado,
contorno com borda pontilhada etc., depende
do navegador).
Se no momento de receber o foco o elemento não estava visível na página (devido à rolagem), a página será rolada até esse elemento.
Se os elementos não tiverem o atributo tabindex
definido ou se ele tiver o valor 0, a navegação
até eles pela tecla Tab ocorrerá na ordem
de sequência dos elementos no código HTML.
Se na página houver elementos que possuem
tabindex definido, então a navegação
começará por eles, partindo do menor valor
do atributo tabindex (o menor pode ser
um) e assim por diante, em ordem crescente
dos valores do atributo, e quando esses elementos
acabarem - a navegação prosseguirá pelos elementos
que não possuem tabindex definido ou que o têm
com valor 0.
O valor do atributo são números inteiros de
1 ao infinito. Se alguns números
forem omitidos - nada de grave acontecerá
(por exemplo, se não houver o número 2,
primeiro o foco cairá no elemento com tabindex
igual a 1, e depois no elemento com tabindex
igual a 3).
Se na página, no momento de pressionar a tecla
Tab, houver um elemento em foco (o foco pode
ter sido obtido não apenas pressionando Tab,
mas também clicando com o mouse no elemento ou pelo atributo
autofocus),
então o próximo pressionamento da tecla Tab fará
com que o foco seja recebido pelo elemento seguinte na ordem
após aquele que está em foco (por exemplo,
se atualmente o elemento com tabindex
3 está em foco, então o próximo a receber o foco será o elemento
com tabindex 4).
Se um campo de entrada tiver o atributo disabled definido,
ele será ignorado na navegação pela
tecla Tab, mesmo que este campo tenha o atributo
tabindex definido.
O atributo tabindex é aplicado às tags
a,
input,
textarea,
button,
select,
area.
Exemplo
Vamos definir o atributo tabindex para os
inputs.
Pressione sequencialmente a tecla Tab e você verá
como o foco de entrada passará do primeiro
input para o quarto, e depois prosseguirá pelos links
do início da página (já que não há mais elementos
com o atributo tabindex definido):
<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">
:
Veja também
-
a pseudoclasse
focus,
que permite alterar os estilos do elemento em foco
