2011-11-07 21 views
9

Me gustaría obtener eventos keydown en un div. Yo uso la clave de JQuery. Bastante simple.¿Cómo puedo obtener eventos keydown en un div en cromo?

Sin embargo, no funciona en cromo. Para que esto funcione en Chrome, tengo que establecer tabindex = 0.

Si hago esto, Chrome pone un borde naranja feo alrededor de mi div.

¿Hay alguna manera de hacer que esto funcione en cromo sin el borde naranja feo?

+0

Pregunto a dónde va de la manera correcta con esto. Para tener un evento 'keydown' teóricamente necesitas enfocarte en tu elemento; de lo contrario, ¿en qué te estás enfocando? –

+0

¿Cómo podría haber un evento de selección en un div? Pensé que solo las entradas de texto y las áreas de texto podrían estar codificadas – frenchie

Respuesta

16

El evento Keydown solo se envía al elemento HTML que tiene el foco. Los elementos enfocables varían entre los navegadores, pero los elementos cuya propiedad de tabindex está configurada siempre pueden enfocarse en la mayoría de los navegadores.

Ya ha configurado tabindex para elemento div para que sea enfocable y pueda recibir eventos de teclado. Su problema es el esquema predeterminado del elemento actualmente enfocado en Google Chrome.

Para cambiar el contorno (el "borde naranja feo" como mencionaste), usa la clase pseudo CSS: enfoque y contorno de la propiedad CSS. El siguiente ejemplo eliminará el esquema de todos los elementos cuando tengan foco:

*:focus 
{ 
    outline: none; 
} 

Espero que esta ayuda.

+1

Solo una nota que para accesibilidad, configuración de ouline: none universalmente * no * recomendado. Ver http://webaim.org/blog/plague-of-outline-0 y http://www.outlinenone.com – jbyrd

Cuestiones relacionadas