Question

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

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

谢谢！

Answer 1

给div和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
    }
});

Answer 2

您可以通过给元素一个选项卡索引来使其获得焦点。

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

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

如果您希望使用Tab键使元素可聚焦，请为其提供大于-1的索引。

Simple example

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

2 个答案: