¿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

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