如何在不接受焦点的元素上抓取键盘事件？

Question

我知道,为了处理输入字段中的键盘事件,您可以使用:

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

但是,现在,我有一些div和li元素,我没有form元素,我的元素都没有被认为是表单元素,也没有一个接受焦点或标签和类似的东西.

但是现在我需要处理div元素中的keyup(或者keydown,或者keypress无关紧要)事件.我试过了:

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

但问题是,它不起作用.我该怎么办？

Answer 1

一个div在默认情况下无法获得焦点.但是,您可以通过向以下内容添加tabindex属性来更改它div:

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

然后div,您可以给出焦点,并使用hover事件模糊它:

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

当div具有焦点时,它将接受键盘事件.您可以在此处查看此示例.

Answer 2

我迟到了,但现在确保正确事件发生的正确方法是使用HTML5新属性"contenteditable":

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

然后可以应用经典的Js机制:

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