在DIV元素上捕获按键按下（或按键按下）事件

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

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

（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的所有代码。

＃

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

使用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>

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

本文地址：http://javascript.askforanswer.com/zaidivyuansushangbuhuoanjiananxiahuoanjiananxiashijian.html
文章标签：html , javascript , jquery , keypress , scripting
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

使用jQuery

使用JavaScript

文件下载