捕获 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焦点边框，在 CSS 中设置 outline: none。

参见密码的表格了解更多 keyCode的可能性。

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

#

小开

Tabindex HTML 属性指示它的元素是否可以被聚焦，以及它是否/在何处参与顺序键盘导航(通常使用 Tab键)。阅读 MDN 网络文档以获得完整参考。

$( "#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>

小开

下面是一个普通 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>