如何在不接受焦点的元素上捕获键盘事件? [英] How to grab keyboard events on an element which doesn't accept focus?

问题描述

我知道要在输入字段中处理键盘事件，可以使用:

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

但是，现在，我有一些div和li元素，并且没有form元素，并且我的所有元素都不被视为表单元素，并且它们都不接受 或 tab 标签之类的东西.

But, now, I have some div and li elements, and I don't have a form element, and none of my elements are considered to be form elements and none of them accept focus or tab and stuff like that.

但是现在我需要在div元素中处理keyup(或keydown或keypress无关紧要)事件.我试过了:

But now I need to handle the keyup (or keydown, or keypress, doesn't matter) event in a div element. I tried:

$('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?

推荐答案

默认情况下，div不能被赋予焦点.但是，您可以通过在div上添加tabindex属性来更改它:

A div by default cannot be given focus. However, you can change that by adding a tabindex attribute to the div:

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

然后可以赋予div焦点，并通过hover事件对其进行模糊处理:

You can then give the div focus, and also blur it with the hover event:

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

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

When the div has focus, it will accept keyboard events. You can see an example of this working here.

这篇关于如何在不接受焦点的元素上捕获键盘事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！