捕获 DIV 元素上的按键（或 keydown）事件答案

【问题标题】：Capture key press (or keydown) event on DIV element捕获 DIV 元素上的按键（或 keydown）事件
【发布时间】：2011-03-10 03:02:34
【问题描述】：

如何捕获 DIV 元素上的按键或按下事件（使用 jQuery）？

赋予 DIV 元素焦点需要什么？

【问题讨论】：

div 的“焦点”是什么意思？
jboyd 有tabindex 时，除了tab 到它，你可以用javascript 找到它并调用它的focus 方法。
@Lalchand ...你能接受我的回答吗？ :)

标签： javascript jquery html scripting keypress

【解决方案1】：

(1)设置tabindex属性：

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

(2) 绑定到keydown：

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

将焦点设置在开始：

$(function() {
   $('#mydiv').focus();
});

要删除 - 如果您不喜欢 - div 焦点边框，请在 CSS 中设置 outline: none。

查看keycodes 的表格了解更多keyCode 的可能性。

所有代码都假设你使用 jQuery。

【讨论】：

+1 tabindex 是使 div '可选择'的关键点。 JQuery 不是必需的，同样的事情适用于 Angular 以及（我想）纯 javascript 事件。
浏览器对此的支持是什么？
tabindex 是关键部分，但不要设置为“0”以外的任何值。将其设置为高于 0 的值会扰乱视障用户的屏幕阅读器（它将跳过页面上的所有内容并直接转到任何高于 0 的 tabindex）。 tabindex="0" 使其成为“可选项卡”。你可以有无限的元素 tabindex="0"
也适用于
```
！
```
太棒了！我错过了 tabindex 属性，可能是因为 DIV 无法获得焦点，除非它们有 tabindex。谢啦！救了我的命！编辑：也适用于 React

【解决方案2】：

tabindex HTML 属性指示其元素是否可以聚焦，以及是否/在哪里参与顺序键盘导航（通常使用Tab 键）。阅读MDN Web Docs 以获得完整参考。

使用 Jquery

$( "#division" ).keydown(function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
});

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

使用 JavaScript

var el = document.getElementById("division");

el.onkeydown = function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
};

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

&lt;div id="division" tabindex="0"&gt;&lt;/div&gt;

【讨论】：

我实际上是在寻找当 div 上的控件失去焦点时触发 focusout 事件的问题，例如单击 div 滚动条，只需将制表位添加到 div 即可解决，所以谢谢你这么多

【解决方案3】：

这里是纯 JS 的示例：

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})

#myDiv {
  outline: none;
}

<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

【讨论】：