JavaScript中怎么用event keycode控制键盘操作？

你玩过网页游戏吗？当按下W键人物前进，按空格键跳跃的时候，有没有好奇过这些操作是怎么实现的？今天咱们就来扒一扒藏在键盘按键背后的神秘数字——keycode，看看它到底能玩出什么花样。

什么是keycode？ 简单说就是每个按键对应的身份证号码。比如回车键是13，空格键是32。但这里有个坑要注意：早期浏览器用event.which，后来流行event.keyCode，现在又推荐用event.key。不过别慌，咱们先从最经典的keyCode开始讲。

假设你要做个搜索框，用户按回车就自动搜索。先给输入框绑个事件监听： javascript document.querySelector(‘input’).addEventListener(‘keydown’, function(event) { if(event.keyCode === 13) { // 这里写搜索逻辑 } }); 这时候你可能要问：怎么知道各个按键对应的数字？其实不用死记硬背，直接在控制台敲这段代码测试： javascript document.addEventListener(‘keydown’, function(e){console.log(e.keyCode)})

实际应用场景

最常见的有三种用法：

1. 游戏控制（WASD移动）

2. 表单操作（回车提交）

举个真实案例，某电商网站在商品详情页加了快捷键：按左右箭头切换商品，按F键收藏。实现代码大概长这样： “`javascript document.addEventListener(‘keyup’, function(e) { // 防止与浏览器默认快捷键冲突 if(e.target.tagName === ‘INPUT’) return;

switch(e.keyCode) { case 37: // 左箭头 showPrevProduct(); break; case 39: // 右箭头 showNextProduct(); break; case 70: // F键 toggleFavorite(); break; } }); “`

必须知道的坑点 最近几年浏览器开始淘汰keyCode属性。比如2021年Chrome更新后，event.keyCode在部分场景会返回0。这时候该用event.key这个新属性，它会直接返回按键的字符值，比如’a’、’Enter’。但要注意字母区分大小写，shift键组合的情况。

兼容性处理可以这么写： javascript const key = event.key || String.fromCharCode(event.keyCode); if(key.toLowerCase() === ‘a’) { // 处理A键按下 }

键盘幽灵现象 有时候明明监听了keydown事件，但按键没反应。这种情况多半是焦点问题——比如用户正在输入框里打字，按键事件被输入框吃掉了。解决办法有两个：要么阻止输入框的默认行为，要么监听document级别的键盘事件。

最后说个冷知识：数字小键盘的按键和主键盘区的数字键，它们的keycode是不同的。比如主键盘的5是53，小键盘的5是101。做计算器这类需要区分小键盘的项目时要特别注意。

现在你明白了吧？keycode就像键盘世界的摩斯密码，掌握它就能让网页跟用户的手指跳舞。下次看到别人网站炫酷的快捷键操作，别光顾着惊叹，打开开发者工具看看人家是怎么玩转这些数字密码的。