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

Posted 2023-02-22

【中文标题】捕获 DIV 元素上的按键（或 keydown）事件

【英文标题】：Capture key press (or keydown) event on DIV element

【发布时间】：2011-03-10 03:02:34

【问题描述】：

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

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

【问题讨论】：

div 的“焦点”是什么意思？

jboyd 有tabindex 时，除了tab 到它，你可以用javascript 找到它并调用它的focus 方法。

@Lalchand ...你能接受我的回答吗？ :)

【参考方案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;

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

【讨论】：

我实际上是在寻找当 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>