¿Cómo ignorar el elemento HTML de tabindex?

362

¿Hay alguna forma en HTML para decirle al navegador que no permita la indexación de pestañas en elementos particulares?

En mi página, aunque hay un espectáculo secundario que se procesa con jQuery, cuando presionas eso, obtienes muchas pestañas antes de que el control de pestaña se mueva al siguiente enlace visible en la página, ya que todas las cosas que se tabulan están ocultas para El usuario visualmente.

html tabindex Tom Gullen
fuente

Respuestas:

592

Puedes usar tabindex="-1".

La especificación W3C HTML5 admite tabindexvalores negativos :

Si el valor es un entero negativo
El agente de usuario debe establecer el indicador de foco del índice de tabulación del elemento, pero no debe permitir que se llegue al elemento utilizando la navegación de foco secuencial.

Tenga cuidado, sin embargo, porque se trata de una función HTML5 y podría no funcionar con los navegadores antiguos.
Para cumplir con el estándar W3C HTML 4.01 (desde 1999) , el índice de tabulación debería ser positivo.

Ejemplo de uso a continuación en HTML puro.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />
Expandir fragmento

Martin Hennings
fuente
12
Parece que Google Chrome no admite -1, lo que tiene sentido ya que técnicamente tabIndex solo admite 0 -32767 según el enlaceW3 . Entonces cuando hice esto; Usé 500. Hackish; pero funcionó
Flea
38
@Flea A partir de la versión 23, Google Chrome admite -1 en tabindex. No estoy seguro de cuánto tiempo sucedió eso, quizás antes del 23. Probé "-1" en Chrome 23, Firefox 18, IE8, IE9 y Opera 12.11 y funcionó en todos los ámbitos.
jkupczak
55
He editado la respuesta para vincular a la especificación HTML5 actualizada. tabindexahora permite tener valores negativos.
James Donnelly
1
@JamesDonnelly Gracias por tu edición. Volví a agregar la referencia a la especificación W3C HTML4 para la compatibilidad del navegador.
Martin Hennings
2
Compatible desde IE 5.01 msdn.microsoft.com/en-us/library/ie/ms534654(v=vs.85).aspx
Skurpi
121

No olvide que, aunque tabindextodo está en minúsculas en las especificaciones y en el HTML, en Javascript / DOM se llama a esa propiedad tabIndex.

No pierda la cabeza tratando de descubrir por qué sus llamadas de índices de tabulación alteradas programáticamente element.tabindex = -1no están funcionando. Uso element.tabIndex = -1.

Eric L.
fuente
34
Parece que debería ser un comentario, no una respuesta.
DrCord
47
Eh, me alegró leerlo, y probablemente lo habría perdido si hubiera sido enterrado como comentario.
MalcolmOcean
10

Si estos son elementos naturalmente en el orden de tabulación como botones y anclajes, eliminarlos del orden de tabulación con tabindex = -1 es una especie de olor a accesibilidad. Si proporcionan funcionalidad duplicada, eliminarlos del orden de tabulación está bien, y considere agregar aria-hidden = true a estos elementos para que las tecnologías de asistencia los ignoren.

Mate
fuente
8

Si está trabajando en un navegador que no es compatible tabindex="-1", puede salirse con la suya simplemente dando a las cosas que deben omitirse un índice de pestaña realmente alto . Por ejemplo, tabindex="500"básicamente mueve el orden de tabulación del objeto al final de la página.

Hice esto para un formulario de entrada de datos largo con un botón en el medio. No es un botón que la gente hace clic con mucha frecuencia, así que no quería que lo presionen accidentalmente y presionen Intro. disabledno funcionaría porque es un botón.

Jemmeh
fuente
5

Tal truco como "tabIndex = -1" no me funciona con Chrome v53.

Esto es lo que funciona para Chrome y la mayoría de los navegadores:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}
<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>
Expandir fragmento

Val
fuente
¿Esto simplemente no asignará un índice de pestaña predeterminado al elemento en lugar de deshabilitar la tabulación?
Abogados el
@Lawyerson no, en realidad deshabilita las pestañas ya que se explica por sí mismo 'removeAttribute'. ¿Lo has probado pero con un resultado diferente?
Val
2
Lo intenté sin efecto. Los navegadores de forma predeterminada le permiten pasar las entradas en el orden en que aparecen en la página, incluso si no se establece un índice de tabulación en ellas, por lo que solo tiene sentido para mí que simplemente eliminar el atributo en realidad no deshabilite la tabulación por completo. Además, la entrada que quiero usar esta no tiene ningún atributo "tabindex" para empezar.
Abogados el
Al ejecutar el fragmento, puedo notabindexpasar a la casilla como si lo hubiera hecho tabIndex=5después de presionar el botón. No es un problema importante, pero aún no lo hace completamente "imposible de resolver".
Mikael Dúi Bolinder
Probablemente no esté funcionando porque estás usando una funda de camello. Debe ser todo en minúsculastabindex
dman
3

La forma de hacerlo es agregando tabindex="-1". Al agregar esto a un elemento específico, se vuelve inalcanzable por la navegación del teclado. Hay un gran artículo aquí que le ayudará a entender mejor índice de tabulación .

Nesha Zoric
fuente
2

Simplemente agregue el atributo disabledal elemento (o use jQuery para hacerlo por usted). Desactivado evita que la entrada se enfoque o se seleccione en absoluto.

Yaakov Ainspan
fuente
¿Qué versión de Chrome?
Yaakov Ainspan
Chrome 49.0.2623.75 (64 bits).
Felix Eve
Mi versión es 51.0.2704.103. Mira este violín . Es posible que tenga el código incorrecto, nunca se sabe.
Yaakov Ainspan
@AtulChaudhary, ¿cómo no funciona? ¿Todavía puedes enfocarlo?
Yaakov Ainspan
una vez que los campos están deshabilitados, permanecen deshabilitados y es un problema en IOS9 pero parece estar funcionando en IOS10
Atul Chaudhary