Javascript 如何在不接受焦点的元素上抓取键盘事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6633248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to grab keyboard events on an element which doesn't accept focus?
提问by Saeed Neamati
I know that for handling keyboard events in an input field you can use:
我知道要处理输入字段中的键盘事件，您可以使用：
$('input').keyup(function(e){
var code = e.keyCode // and 13 is the keyCode for Enter
});
But, now, I have some divand lielements, and I don't have a formelement, and none of my elements are considered to be form elements and none of them accept focusor taband stuff like that.
但是，现在，我有一些div和li元素，但我没有form元素，而且我的元素都没有被认为是表单元素，而且它们都没有接受焦点或制表符之类的东西。
But now I need to handle the keyup(or keydown, or keypress, doesn't matter) event in a div element. I tried:
但是现在我需要处理div 元素中的keyup(or keydown, or keypress, 无所谓) 事件。我试过：
$('div#modal').keyup(function(e){
if (e.keyCode == 13)
{
$('#next').click(); // Mimicking mouse click to go to the next level.
}
});
But the problem is, it doesn't work. What should I do?
但问题是，它不起作用。我该怎么办？
回答by James Allardice
A divby default cannot be given focus. However, you can change that by adding a tabindexattribute to the div:
Adiv默认情况下无法获得焦点。但是，您可以通过向 中添加tabindex属性来更改它div：
<div tabindex="0" id="example"></div>
You can then give the divfocus, and also blur it with the hoverevent:
然后你可以给div焦点，也可以用hover事件模糊它：
$("#example").hover(function() {
this.focus();
}, function() {
this.blur();
}).keydown(function(e) {
alert(e.keyCode);
});
When the divhas focus, it will accept keyboard events. You can see an example of this working here.
当div有焦点时，它将接受键盘事件。您可以在此处查看此工作的示例。
回答by Smithfield
I'm late but the correct way to ensure the proper event fire now is by using the HTML5 new attribute "contenteditable":
我迟到了，但现在确保正确事件触发的正确方法是使用 HTML5 新属性“contenteditable”：
<div id="myEditableDiv" contenteditable="true"> txt_node </div>
classic Js mechanic can then be applied:
然后可以应用经典的 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);});
回答by Edgar Villegas Alvarado
Interesting question. (Here another for you, how to know the div has focus?)
As I can see, your div is a popup (its id is dialog).
Here you have a workaround:
有趣的问题。（这是另一个给你的，如何知道 div 有焦点？）正如我所看到的，你的 div 是一个弹出窗口（它的 id 是dialog）。在这里，您有一个解决方法：
On popup open:
在弹出窗口中打开：
$("div#modal").data("isOpen", true);
On poup close:
在 poup 关闭时：
$("div#modal").data("isOpen", false);
Then, the binding:
然后，绑定：
$('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.
}
}
});
This way, we're mimicking keyup event on the div. Hope this helps. Cheers
这样，我们就在 div 上模拟了 keyup 事件。希望这可以帮助。干杯
PS: Note that you can use #dialoginstead of div#dialog
PS：请注意，您可以使用#dialog代替div#dialog
