Atributo tabindex
El atributo tabindex establece el orden
de obtención del foco al navegar entre elementos
usando la tecla Tab.
Al presionar esta tecla se pueden activar secuencialmente algunos elementos de la página (enlaces y elementos de formularios). Los elementos activos recibirán el foco de entrada.
Para los campos de entrada tipo input
y textarea
el foco se expresará en que el cursor
parpadeará en el campo y se podrá
introducir texto en él, para
enlaces y otros elementos esto
será un resaltado de alguna manera (subrayado,
contorneado con borde punteado, etc., depende
del navegador).
Si en el momento de obtener el foco el elemento no era visible en la página (debido al desplazamiento), la página se desplazará hasta este elemento.
Si a los elementos no se les asigna el atributo tabindex
o este tiene un valor de 0, entonces la navegación
entre ellos con la tecla Tab seguirá el orden
de aparición de los elementos en el código HTML.
Si en la página hay elementos a los que se les ha asignado
tabindex, entonces la navegación primero
irá por ellos, comenzando desde el valor menor
del atributo tabindex (el más pequeño
puede ser uno) y así sucesivamente en orden ascendente
de los valores del atributo, y cuando se acaben estos elementos
- la navegación continuará por aquellos elementos
a los que no se les ha asignado tabindex o que tienen
el valor 0.
El valor del atributo son números enteros desde
1 hasta infinito. Si se omiten algunos
números - no pasará nada grave
(por ejemplo, si no hay número 2, entonces
primero el foco caerá en el elemento con tabindex,
igual a 1, y luego en el elemento con tabindex,
igual a 3).
Si en la página en el momento de presionar la tecla
Tab hay un elemento en foco (el foco pudo
haberse obtenido no solo presionando Tab,
sino también haciendo clic con el ratón en el elemento o con el atributo
autofocus),
entonces la siguiente pulsación de la tecla Tab llevará
a que el foco lo obtenga el siguiente elemento en orden
después del que está en foco (por ejemplo,
si actualmente está en foco el elemento con tabindex
3, entonces el siguiente en obtener el foco será el elemento
con tabindex 4).
Si a un campo de entrada se le asigna el atributo disabled,
entonces será ignorado en las navegaciones mediante
la tecla Tab, incluso si a este campo se le ha asignado el atributo
tabindex.
El atributo tabindex se aplica a las etiquetas
a,
input,
textarea,
button,
select.
Ejemplo
Vamos a asignar a los inputs
el atributo tabindex. Presione secuencialmente
la tecla Tab y verá
cómo el foco de entrada pasará del primer
input al cuarto, y luego continuará por los enlaces
desde el principio de la página (ya que no hay más elementos
con el atributo tabindex asignado):
<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">
:
Véase también
-
pseudoclase
focus,
que permite cambiar los estilos del elemento en foco
