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

我迟到了，但现在确保正确事件发生的正确方法是使用HTML5新属性＆＃34; contenteditable＆＃34;：

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

Answer 3

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

打开弹出窗口：

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

关于poup close：

$("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

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

3 个答案: