javascript - ¿Cómo capturar eventos de teclado en un elemento que no acepta el enfoque?

jquery keyboard

Question

Sé que para manejar eventos de teclado en un campo de entrada puede usar:

$(''input'').keyup(function(e){
var code = e.keyCode // and 13 is the keyCode for Enter
});

Pero, ahora, tengo algunos elementos div y li , y no tengo un elemento de form , y ninguno de mis elementos se consideran elementos de formulario y ninguno de ellos acepta el enfoque o tabulación y cosas por el estilo.

Pero ahora necesito manejar el keyup (o keydown , o keypress , no importa) en un elemento div. Lo intenté:

$(''div#modal'').keyup(function(e){
if (e.keyCode == 13)
{
$(''#next'').click(); // Mimicking mouse click to go to the next level.
}
});

Pero el problema es que no funciona. ¿Qué tengo que hacer?

Answer 1

Interesante pregunta. (Aquí hay otro para ti, ¿cómo saber que el div tiene enfoque?) Como puedo ver, tu div es una ventana emergente (su id es un dialog ). Aquí tienes una solución:

En la ventana emergente abierta:

$("div#modal").data("isOpen", true);

En el cierre de Poup:

$("div#modal").data("isOpen", false);

Entonces, el enlace:

$(''body'').keyup(function(e){ //Binding to body (it accepts key events)
if($("div#modal").data("isOpen")){ //Means we''re in the dialog
if (e.keyCode == 13) //This keyup would be in the div dialog
{
$(''#next'').click(); // Mimicking mouse click to go to the next level.
}
}
});

De esta manera, estamos imitando el evento keyup en el div. Espero que esto ayude. Aclamaciones

PS: Tenga en cuenta que puede usar #dialog lugar de div#dialog

Answer 2

Llego tarde, pero la forma correcta de garantizar que se desencadene el evento correcto ahora es usando el nuevo atributo HTML5 "contenteditable":

<div id="myEditableDiv" contenteditable="true"> txt_node </div>

El clásico Js mecánico puede ser aplicado:

var el = document.getElementById(''myEditableDiv'');
el.addEventListener(''keypress'', function(e){console.log(e.target.innerText);});
el.addEventListener(''keyup'', function(e){console.log(e.target.innerText);});
el.addEventListener(''keydown'', function(e){console.log(e.target.innerText);});

Answer 3

Un div por defecto no puede ser enfocado. Sin embargo, puede cambiar eso agregando un atributo tabindex al div :

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

Luego, puedes enfocar el div y también difuminarlo con el evento hover :

$("#example").hover(function() {
this.focus();
}, function() {
this.blur();
}).keydown(function(e) {
alert(e.keyCode);
});

Cuando el div tiene foco, aceptará eventos de teclado. Puedes ver un ejemplo de esto trabajando here .