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

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 获得焦点时，它将接受键盘事件。你可以看到这个工作的例子here。

Answer 2

有趣的问题。 （这里给你另一个，如何知道 div 有焦点？） 如我所见，您的 div 是一个弹出窗口（它的 id 是dialog）。 这里有一个解决方法：

在弹出窗口打开时：

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

关闭弹窗时：

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

然后，绑定：

$('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.
       }
   }
});

这样，我们在 div 上模仿 keyup 事件。 希望这可以帮助。干杯

PS：注意可以用#dialog代替div#dialog

Answer 3

我迟到了，但现在确保正确触发事件的正确方法是使用 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);});