如何在DIV元素上捕获按键或按键事件(使用jQuery)?
让DIV元素成为焦点需要什么?
答案 0 :(得分:258)
(1)设置tabindex
属性:
<div id="mydiv" tabindex="0" />
(2)绑定到keydown:
$('#mydiv').bind('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 :(得分:5)
tabindex HTML属性指示其元素是否可以聚焦,以及是否/在何处参与顺序键盘导航(通常使用Tab
键)。阅读MDN Web Docs以获取完整参考。
$( "#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>
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>
答案 2 :(得分: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>