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

Question

我知道在处理输入框中的键盘事件时，可以使用以下代码：

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

现在我有一些 div 和 li 元素，但我没有一个 form 元素，而且我的元素都不被视为表单元素，也不能接受 focus 或 tab 等操作。

但是现在我需要在一个 div 元素中处理 keyup（或 keydown、keypress 都可以）事件。我尝试过：

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

但问题是，它不起作用。 我该怎么办？

- Saeed Neamati

---

我不明白如何在没有焦点的元素中捕获keyup事件。 - Igor Dymov

同意 - 需要对用户如何使用键盘与非交互元素进行交互有一些想法。 - kinakuta

@kinakuta和@Igor Dymov - 您可以使用tabindex属性使div接受焦点。请参见我的答案。 - James Allardice

Answer 1

默认情况下，div 无法获得焦点。但是，您可以通过向 div 添加 tabindex 属性来改变这一点：

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

你可以让 div 获得焦点，并使用 hover 事件使其失去焦点：

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

当 div 获得焦点时，它将接受键盘事件。你可以在这里看到一个工作示例：here。

- James Allardice

---

你需要使用 $(this).focus() 来获取 jQuery 对象，而不是 DOM 元素。.blur() 同理。但是，如果设置了 tabindex 属性，则可以获得键盘事件。谢谢！ - kbro

您，亲切的先生，刚刚让我开心了一整天！！！之前放弃了将DIV绑定的尝试，直到我发现了您解决这个问题的方法！！ - Guy Park

注意：tabindex=0 表示该元素应该在顺序键盘导航中可聚焦，但其顺序由文档的源顺序定义。(来源) 因此，您可以将其分配给多个元素而不会出现问题。 - Christopher K.

Answer 2

我有点晚了，但现在确保正确触发事件的正确方法是使用HTML5的新属性“contenteditable”：

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

接下来可以应用经典的 JavaScript 技术：

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

- Smithfield

---

为什么要使div可编辑？通过设置contenteditable=true，div内部的文本变得可编辑。我认为你不想这样做只是为了让键盘事件起作用。 - CookieEater

问题不在于如何使一个 div 可编辑。 - Drenai

Answer 3

有趣的问题。（这里还有一个问题，如何知道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 事件。 希望这有所帮助。干杯

附注：请注意，您可以使用 #dialog 而不是 div#dialog

- Edgar Villegas Alvarado