在DIV元素上捕获按键按下(或按键按下)事件


146

如何捕获DIV元素上的按键或按下事件(使用jQuery)?

赋予DIV元素重点是什么?


2
“焦点”对div意味着什么?
乔纳森·浮士德

1
jboyd除了在具有tabindex时对其进行制表外,还可以使用javascript查找并在其上调用focus方法。
布伦丹·恩里克

2
@Lalchand ...您何时可以接受我的回答?:)
helle

Answers:


301

(1)设置tabindex属性:

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

(2)绑定到按键:

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

要把重点放在开始上:

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

要删除(如果您不喜欢)div焦点边框,请outline: none在CSS中进行设置。

有关更多可能性,请参见键码keyCode

假设您使用jQuery的所有代码。


43
+1 tabindex是使div“可选”的关键。jQuery不是必需的,同样的事情也可以用于Angular以及(我想)可以用于普通的javascript事件。
Jukka Dahlbom 2014年

4
浏览器对此有哪些支持?
已知的2014年

27
tabindex是关键部分,但请勿将其设置为“ 0”以外的任何值。将其设置为大于0的任何值都会使视障用户的屏幕阅读器混乱(它将跳过页面上的所有内容,并直接转到大于0的任何tabindex)。tabindex =“ 0”使其变为“ tabbable”。您可以使用tabindex =“ 0”包含无限元素
zonabi

2
也可以与<pre>一起使用!
dfmiller '16

2
优秀的!我缺少tabindex属性,可能是因为DIV除非具有tabindex,否则无法获得焦点。谢啦!救了我一命!编辑:有作出反应,以及作品
维尼修斯Negrão

6

这是纯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>


这如何回答这个问题?
Poul Bak

5

tabindex HTML属性指示其元素是否可以聚焦,以及是否/在何处参与顺序键盘导航(通常使用Tab键)。阅读MDN Web文档以获取完整参考。

使用jQuery

使用JavaScript


1
当div上的控件失去焦点时说要单击div滚动条时,我实际上发现这是焦点事件触发的一个问题,只需将tabstop添加到div就可以了,所以非常感谢
MikeT
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.