Cómo capturar eventos de teclado en un elemento que no acepta el foco?

Question

sé que para el manejo de eventos de teclado en un campo de entrada que puede utilizar:

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

Pero, ahora, tengo algunas div y li elementos, y no tener un elemento form, y ninguno de mi los elementos se consideran elementos de formulario y ninguno de ellos acepta foco o pestaña y cosas por el estilo.

Pero ahora necesito manejar el evento keyup (o keydown, o keypress, no importa) en un elemento div. 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é debo hacer?

Answer 1

A div de forma predeterminada no se puede enfocar. Sin embargo, esto se puede cambiar mediante la adición de un atributo tabindex a la div:

entonces usted puede dar el foco div, y también la falta de definición con el hover evento:

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

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

Answer 2

Interesante pregunta. (Aquí hay otro para usted, ¿cómo saber si el div tiene foco?) Como puedo ver, su div es una ventana emergente (su identificación es dialog). Aquí tienes una solución:

En abierta emergente:

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

En poup estrecha:

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

Entonces, la unión:

$('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 re imitando el evento keyup en el div. Espero que esto ayude. Saludos

PS: Tenga en cuenta que se puede utilizar en lugar de #dialogdiv#dialog

Answer 3

llego tarde, pero el camino correcto para asegurar el fuego evento adecuado ahora es usar el nuevo atributo HTML 5 "contenteditable":

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

mecánica clásica Js continuación, se puede aplicar:

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);});