Tabindex Focus Estilos

He hecho un tabulable div con el atributo tabindex para hacer accesible el contenido oculto.Tabindex Focus Estilos

Actualmente, cuando se hace clic con el mouse div obtiene el estilo del navegador :focus.

¿Hay alguna manera de tener ese elemento tabble para tener solo un estilo de enfoque cuando se accede a través del teclado? Un elemento de anclaje tiene esto por defecto.

Div con tabindex='0' consigue estilos de enfoque del navegador en el ratón y el teclado interacción
ancla consigue estilos de enfoque del navegador en interacción con el teclado única

Me gustaría que el div para emular el ancla. Hacerlo un ancla no es una opción aunque desafortunadamente.

Cualquier ayuda sería genial, estoy realmente perdido.

Editar -> Este es un ejemplo: http://jsfiddle.net/LvXyL/2/

Fuente

2012-04-20 Henry Hoffman

FWIW: Parece que el comportamiento que está describiendo depende realmente del navegador: en Chrome, div obtiene el estilo de foco en el mouse/teclado pero ancla solo en el teclado como usted describe; pero en IE, * ambos * obtienen el rectángulo de foco en el mouse o el teclado; mientras tanto, en Firefox, ni obtener el esquema de enfoque * hasta que * el teclado se use en ese cuadro, y luego ambos obtengan el contorno del foco tanto para el mouse como para el teclado. – BrendanMcK

-1

Si puede usar javascript, intente uso onclick atributo.

onclick="this.blur()" para el enfoque perdido

onclick="this.focus()" para el sistema de enfoque

Ejemplo en el que DIV en tecleo perdido el foco y A se ajusta el enfoque http://jsfiddle.net/LvXyL/6/

desventaja es el estilo foco visible si se mantiene la tecla del ratón durante un largo hora.

Fuente

2012-04-20 12:32:45 kubedan

Gracias por la respuesta, esto está bastante cerca pero el foco permanece en el mouse hacia abajo y al hacer clic y arrastrar el elemento. –

No se recomienda el uso de .blur(), ya que interferirá con el uso correcto del teclado. Al hacer clic en un tabulador div * debe * establecer el foco allí, pero el uso de this.blur() evita esto. – BrendanMcK

Simplemente agregue la pseudoclase: focus a div y estilo. Recomiendo usar contorno versus borde. Actualicé el violín.

div:focus {outline: blue solid 2px;}

Kub sugirió una solución JS, pero ¿por qué usar js si no necesita realmente?

Fuente

2012-04-20 12:36:58

Porque, quiere establecer el foco solo por el teclado, no por el mouse. – kubedan

y ¿qué ocurre si dicho usuario tiene JS desactivado? Este enfoque cubre el mouse y el teclado. –

Si JS está desactivado, mi solución no funciona, por supuesto. – kubedan

Tabindex Focus Estilos

Respuesta

Cuestiones relacionadas