首页 >web前端 >js教程 >如何使用按键事件处理 JavaScript 中的箭头键输入?

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

Linda Hamilton
Linda Hamilton原创
2024-11-03 00:07:03696浏览

How to Handle Arrow Key Input in JavaScript Using Key Events?

使用按键事件处理 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn