Capture el evento de presionar una tecla (o presionar una tecla) en el elemento DIV

146

¿Cómo se atrapa el evento de pulsación de tecla o tecla abajo en un elemento DIV (usando jQuery)?

¿Qué se requiere para darle el foco al elemento DIV?

Lalchand
fuente
2
¿Qué significa "enfoque" para un div?
Jonathon Faust
1
jboyd, aparte de tabularlo cuando tiene un índice de tabulación, puede usar javascript para encontrarlo y llamar al método de enfoque.
Brendan Enrick
2
@Lalchand ... ¿puedes aceptar mi respuesta en algún momento? :)
helle

Respuestas:

301

(1) Establezca el tabindexatributo:

<div id="mydiv" tabindex="0" />

(2) Enlace al keydown:

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

Para establecer el foco en el inicio:

$(function() {
   $('#mydiv').focus();
});

Para eliminar, si no le gusta, el divborde de enfoque, establezca outline: noneen el CSS.

Vea la tabla de códigos clave para más keyCodeposibilidades.

Todo el código suponiendo que use jQuery.

# #
helle
fuente
43
El índice clave +1 es el punto clave aquí para hacer que el div sea 'seleccionable'. JQuery no es necesario, lo mismo funciona con Angular así como (supongo) con eventos simples de JavaScript.
Jukka Dahlbom
44
¿Cuál es el soporte del navegador para esto?
conocidoasilya
27
tabindex es una parte clave, pero no lo establezca en ningún valor que no sea "0". Hacer que esté por encima de 0 va a estropear los lectores de pantalla para usuarios con discapacidad visual (se saltará todo en la página e irá directamente a cualquier índice de tabulación por encima de 0). tabindex = "0" hace que sea "tabulable". puede tener elementos infinitos con tabindex = "0"
zonabi
2
Funciona con <pre> también!
dfmiller
2
¡Excelente! Me faltaba el atributo tabindex, tal vez porque los DIV no pueden recibir el foco a menos que tengan un índice tabindex. ¡Gracias hombre! ¡Salvó mi vida! EDITAR: también funciona con React
Vinícius Negrão
6

Aquí ejemplo en JS simple:

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})
#myDiv {
  outline: none;
}
<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

Илья Зеленько
fuente
¿Cómo responde esto a la pregunta?
Poul Bak
5

El atributo HTML tabindex indica si su elemento puede enfocarse y si / dónde participa en la navegación secuencial del teclado (generalmente con la Tabtecla). Lea MDN Web Docs para obtener una referencia completa.

Usando Jquery

Usando JavaScript

nkshio
fuente
1
De hecho, encontré esto buscando un problema con el evento de foco activado cuando los controles en el div perdieron el foco dicen que haga clic en la barra de desplazamiento de divs, simplemente agregar el tabulador al div fue la solución, así que muchas gracias
MikeT