如何在 div 上使用 'keydown' 事件侦听器？

Question

我正在尝试捕获按键事件，其中特定键对应于要播放的特定音频剪辑。我一直在寻找，但我很难过。 keydown 事件似乎只在 window/document 对象中可用。这个对吗？我看到一些关于 jQuery 插件的讨论，尽管我想远离 jQuery。香草 JS 是理想的。

我有 2 个 DIVS，我想同时监听 keydown 事件。根据按下的键，函数播放相应的音频剪辑。

谢谢！

Answer 1

您可以通过为元素提供制表符索引来使其获得焦点。

<div tabindex="-1"></div>

只要它处于焦点中，就应该在其上捕获关键事件。

如果您希望元素可以使用 Tab 键获得焦点，请为其指定一个大于 -1 的索引。

Simple example

Answer 2

给div一个tabindex，这样它就可以聚焦了。在您的情况下，-1 的 tabindex 是最好的，因为它可以让元素聚焦但仍然无法通过 tab 键访问。

The tabindex global attribute indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).

A negative value (usually tabindex="-1") means that the element should be focusable, but should not be reachable via sequential keyboard navigation. It's mostly useful to create accessible widgets with JavaScript.

然后您可以向该元素添加一个 keydown 事件侦听器并检查事件的 keyCode。

document.getElementById("someId").addEventListener("keydown", function(event){
    //do something on keydown
    if(event.keyCode==13){
     //enter key was pressed
    }
    if (event.keyCode >= 65 && event.keyCode <= 90){
       //input was a-z
    }
});

如何在 div 上使用 'keydown' 事件侦听器？

How can I use a 'keydown' event listener on a div?

javascript

keydown

addeventlistener