HTML中如何写键盘事件

在Web开发中，键盘事件是提升用户体验最直接的手段之一。特别是在工具类页面（如验证码识别、图片浏览），合理的快捷键能让操作效率翻倍。

本文从基础到实战，讲清楚键盘事件怎么写、怎么用、有哪些坑。

---

一、三个事件的区别

事件	触发时机	适用场景
keydown	按下按键时立刻触发	推荐 ，响应最快，能拿到e.key
keyup	松开按键时触发	需要判断按键时长时用
keypress	按下并产生字符时触发	⚠️ 已废弃，不要用

结论：99%的场景用 keydown 就够了。

---

二、基础写法

document.addEventListener('keydown', function(e) {
    console.log(e.key);        // 按下的键，如 "a", "Enter", "ArrowLeft"
    console.log(e.code);       // 物理键位，如 "KeyA", "Space", "ArrowLeft"
    console.log(e.shiftKey);   // 是否同时按了Shift
});

e.key vs e.code 怎么选？

• e.key → 读的是"字符"，a 和 A 都返回 "a"（配合Shift）
• e.code → 读的是"物理键"，永远返回 "KeyA"

做快捷键，用 e.key 更方便，因为不用判断大小写。

---

三、实战：验证码识别页面的快捷键

这是我们实际项目中的完整实现：

document.addEventListener('keydown', function(e) {
    // 关键：避免在输入框中触发
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
        return;
    }

    switch (e.key) {
        case 'a':
        case 'A':
            e.preventDefault();
            left_handed();   // 左旋1°
            break;
        case 'd':
        case 'D':
            e.preventDefault();
            right_handed();  // 右旋1°
            break;
        case 'ArrowLeft':
            e.preventDefault();
            last_img();      // 上一张
            break;
        case 'ArrowRight':
            e.preventDefault();
            next_img();      // 下一张
            break;
        case 'Enter':
            e.preventDefault();
            identify();      // 识别
            break;
        case 's':
        case 'S':
            e.preventDefault();
            save_img();      // 保存
            break;
    }
});

为什么要加 e.preventDefault()？

不加的话，按 Enter 会触发表单提交，按方向键会滚动页面。preventDefault() 阻止浏览器默认行为，把按键完全交给你的代码。

---

四、加个滚轮切换，效率再提一档

键盘之外，鼠标滚轮也能绑定：

document.addEventListener('wheel', function(e) {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
        return;
    }

    e.preventDefault();  // 必须加，否则页面会跟着滚

    if (e.deltaY > 0) {
        next_img();      // 滚轮向下 → 下一张
    } else {
        last_img();      // 滚轮向上 → 上一张
    }
}, { passive: false });  // passive: false 是关键

{ passive: false } 不能省。 浏览器默认把 wheel 事件设为 passive: true（性能优化），这时调用 preventDefault() 会被静默忽略，页面照样滚动。

---

五、三个常见坑

坑1：不判断输入框

用户在输入框里打字，结果触发了快捷键，体验直接崩掉。

if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
    return;
}

这行代码必须放在最前面。

坑2：用 keypress

keypress 已经被废弃，而且不支持方向键、功能键。别用。

坑3：忘记阻止默认行为

Enter 提交表单、方向键滚动页面、空格键滚动页面......不加 preventDefault()，快捷键和浏览器行为会打架。

---

六、快捷键设计原则

原则	说明
手指移动最小化	左手管 A/S，右手管 Enter/方向键
符合直觉	← 上一张，→ 下一张，Enter 确认
避免冲突	不要用浏览器保留键（F5、Ctrl+S 等）
大小写都支持	case 'a': case 'A': 写在一起

---

总结

键盘事件的核心就三句话：

1. 用 keydown，拿 e.key 判断按键
2. 加 preventDefault() 防止默认行为
3. 第一行判断是否在输入框中

掌握这三点，你就能给任何页面加上流畅的快捷键操作。