如何使用按键事件处理 JavaScript 中的箭头键输入？

使用按键事件处理 Javascript 中的箭头键输入

检测和处理箭头键输入对于 Web 开发中的各种场景非常有用。这可以通过浏览器内置的按键事件处理功能来实现。

使用 Javascript 按键事件的解决方案：

提供的 Javascript 代码利用 document.onkeydown用于监听按键事件的事件处理程序。当按下某个键时， event.which 属性用于确定按键代码。箭头键代码对应于以下值：

• 向左箭头：37
• 向上箭头：38
• 向右箭头：39
• 向下箭头: 40

switch 语句处理这些关键代码并允许您为每次按键定义自定义逻辑。

详细实现：

<code class="javascript">document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</code>

其他注意事项：

• 为了支持 Internet Explorer 8，请修改函数的开头，如下所示：e = e ||窗口.事件; switch(e.which || e.keyCode) {}
• 自 2020 年起，KeyboardEvent.which 已弃用。对于更现代的解决方案，请使用 KeyboardEvent.key:

<code class="javascript">document.onkeydown = function(e) {
    switch(e.key) {
        case "ArrowLeft": // left
        break;

        case "ArrowUp": // up
        break;

        case "ArrowRight": // right
        break;

        case "ArrowDown": // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</code>

以上是如何使用按键事件处理 JavaScript 中的箭头键输入？的详细内容。更多信息请关注PHP中文网其他相关文章！