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

Question

我试图捕获按键事件，其中特定键对应于要播放的特定音频片段。我一直在搜索，但很困惑。看来keydown事件仅在window / document对象中可用。它是否正确？我已经看过有关jQuery插件的话题，尽管我想远离jQuery。香草JS是理想的选择。

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

谢谢！

Answer 1

您可以通过给一个标签索引来允许一个元素获得焦点。

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

只要它在焦点上，关键事件就应该被捕获。

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

简单的例子

Answer 2

给diva tabindex，这样它将是可聚焦的。在您的情况下，最好将tabindex设为-1，因为它可以使元素集中，但不能通过tab键访问。

tabindex全局属性指示其元素是否可以聚焦，以及是否/在何处参与顺序键盘导航（通常使用Tab键，因此使用名称）。

负值（通常为tabindex =“-1”）意味着该元素应该是可聚焦的，但不能通过顺序键盘导航来访问。使用JavaScript创建可访问的小部件最有用。

然后，您可以将keydown事件侦听器添加到元素，并检查事件的keyCode。

document.getElementById("somediv").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
    }
});