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

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

$('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不能给予焦点。 但是，您可以通过向div添加tabindex属性来更改它：

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

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

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

Answer 2

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

 
 txt_node  

然后可以应用经典的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关闭：

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