2011-02-11 14 views
34

¿Es posible controlar tabindex con CSS y, en caso afirmativo, qué navegadores lo admiten y en qué elementos?tabindex en CSS

EDITAR

mejor dicho, mi objetivo es atrapar keydown eventos en un div. Vi esta página http://www.quirksmode.org/js/events/keys.html# que prueba los eventos del teclado y muestra que la única manera en que la tecla dispara se dispara en cualquier cosa que no sea documento y cuerpo o algún tipo de elemento o enlace de formulario es tener tabindex declarado en él. Pero he leído en el sitio del W3C:

Los siguientes elementos soportan el atributo tabindex : A, AREA, BOTÓN, INPUT, OBJECT, SELECT y TEXTAREA.

Así que estoy un poco confundido, ¿qué hacer para cumplir con los estándares y hacer que mi caso de uso funcione?

Edit2

Mi caso de uso conjunto es un div con una gran cantidad de contenido con una barra de desplazamiento artificial. Puedo desplazarlo con eventos de mouse pero hasta ahora no he tenido suerte con el teclado.

+1

La captura de eventos de teclado en el div no es el caso de uso. Es un detalle de implementación de su intento de respuesta al caso de uso. Responde de manera diferente. (No podemos darle muchos consejos sobre cómo porque no nos ha dicho cuál es el caso de uso real). – Quentin

Respuesta

25

Eche un vistazo a la propiedad nav-index presentada por W3C en CSS3-UI.

Esta propiedad tiene exactamente el mismo comportamiento que tabindex y es aplicable a cualquier elemento.

La propiedad ‘nav-index’ es una forma de entrada-método-neutral de especificar el orden de navegación secuencial (también conocido como "orden de tabulación"). Esta propiedad es un reemplazo para el atributo 'tabindex' HTML 4/XHTML1

siendo probablemente los mejores compatible con los estándares solución para el caso de uso, nav-index sólo se interpreta por Opera hasta ahora (en junio de 2012) y es también marcado como "Característica en riesgo" por el W3C, por lo tanto puede ser eliminado en cualquier momento.

soluciones entre navegadores alternativos son:

  • no cumple con los estándares establecidos: el atributo tabindex en un DIV. Esto funcionará en todos los navegadores comunes.

  • compatible con los estándares: DIV reemplazar por un elemento de anclaje (A) sin un conjunto de atributos href, estilo con display: block y añadir el atributo tabindex.

Con respecto al punto BoltClock's, I de acuerdo en que el orden de tabulación es muy lógico (tanto el orden de selección de texto y el orden de tabulación están estrechamente relacionadas con la secuencia en la que los elementos se aranged en el documento). Por otro lado, CSS tiene un propósito más amplio hoy en día. Puede manipular no solo el contenido de un documento (propiedad content) sino también el comportamiento cuando y si los eventos se disparan: es decir, usando pointer-events, display o z-index, el orden del evento del puntero cambiará. Si se trata de propiedades de CSS muy básicas, ¿por qué no debería poder influir en KeyBoardEvents también?


Actualización 2017

como ha señalado @Wallop en los comentarios, la propiedad fue nav-indexdropped from the spec en 2015 debido a la "falta de interés de implementación".

+1

He oído que 'tabindex' ahora está permitido en todos los elementos en HTML5 ... por alguna razón. – BoltClock

+5

A partir de abril de 2014, 'nav-index' aún no tiene relativamente compatibilidad con el navegador. :( –

+2

@JeremyWest 'nav-index' suena bien, pero parece que [todavía no es compatible] (http://www.w3schools.com/cssref/css3_browsersupport.asp) con cualquier navegador. –

8

Esto es un poco viejo, pero ahora hay opciones de CSS como -moz-user-focus. Estoy seguro de que hay un equivalente de webkit.

https://developer.mozilla.org/en-US/docs/CSS/-moz-user-focus

+7

Es solo que estaba teniendo el mismo problema y quería responderlo con la forma en que el usuario Los temas de stackoverflow vienen de largo en Bing y Google, así que quería agregar la respuesta aquí. – Noitidart

+0

Pero, eh, ¿Cómo usas esto? La página MDN no lo explica muy bien ... – SamB

+0

@SamB establece '-moz-user-focus: none' o' -moz-user-focus: -moz-none' o 'user-focus: none' en su elemento. 'user-focus' es la forma estandarizada. – Noitidart

Cuestiones relacionadas