键盘事件与键值映射基础

在 Web 前端开发中，捕获和处理键盘事件是实现复杂用户交互的核心环节。尽管现代 Web 标准已推荐使用 event.key 和 event.code 来替代传统的 event.keyCode，但在维护遗留系统或需要兼容特定老旧环境时，keyCode 依然是必须掌握的属性。本文将系统梳理常用的键盘编码，并提供基于现代 JavaScript 标准的事件处理实践。

常用 KeyCode 分类速查表

为了提升查阅效率，以下将庞杂的键值按功能模块进行了结构化分类。

1. 控制、修饰与导航键

KeyCode	按键名称	KeyCode	按键名称
8	Backspace (退格)	9	Tab (制表符)
13	Enter (回车)	16	Shift
17	Ctrl	18	Alt
19	Pause/Break	20	Caps Lock (大写锁定)
27	Escape (Esc)	32	Space (空格)
33	Page Up	34	Page Down
35	End	36	Home
37	Left Arrow (左)	38	Up Arrow (上)
39	Right Arrow (右)	40	Down Arrow (下)
45	Insert	46	Delete

2. 字母与主键盘数字键

范围	对应字符	说明
48 - 57	0 - 9	主键盘上方的数字键（包含对应符号）
65 - 90	A - Z	英文字母键（不区分大小写状态）

3. 数字小键盘 (Numpad)

KeyCode	按键	KeyCode	按键
96 - 105	数字 0 - 9	106	乘号 (*)
107	加号 (+)	109	减号 (-)
110	小数点 (.)	111	除号 (/)

4. 功能键 (F1 - F12)

功能键 F1 至 F12 对应的 KeyCode 范围为 112 至 123。例如，F1 为 112，F5（刷新）为 116，F12（开发者工具）为 123。部分键盘扩展的 F13-F24 则对应 124-135。

现代化键盘事件处理实践

早期的 JavaScript 代码常使用 document.onkeydown 结合浏览器嗅探来处理事件。现代开发中，应统一使用 addEventListener，并结合 event.preventDefault() 来控制默认行为。

示例 1：全局快捷键与回车键监听

监听全局键盘事件，识别回车键或特定的组合快捷键（如 Ctrl+S）。

document.addEventListener('keydown', (event) => {
    // 监听回车键 (兼容 keyCode 与现代 key 属性)
    if (event.key === 'Enter' || event.keyCode === 13) {
        console.log('触发回车提交逻辑');
    }

    // 监听 Ctrl+S 或 Cmd+S 保存快捷键
    if ((event.ctrlKey || event.metaKey) && (event.key === 's' || event.keyCode === 83)) {
        event.preventDefault(); // 阻止浏览器默认的保存页面行为
        console.log('触发应用内保存逻辑');
    }
});

示例 2：输入框限制仅允许输入数字

在表单验证中，经常需要限制用户只能输入数字。以下代码通过拦截非数字键的 keydown 事件来实现，同时保留了必要的控制键（如退格、方向键）和系统快捷键（如复制、粘贴）。

const numericInput = document.getElementById('number-only-field');

numericInput.addEventListener('keydown', (e) => {
    const controlKeys = [8, 9, 13, 35, 36, 37, 39, 46]; // Backspace, Tab, Enter, End, Home, Left, Right, Delete
    
    if (controlKeys.includes(e.keyCode)) {
        return; // 允许基础控制键
    }
    
    // 允许 Ctrl/Cmd + A/C/V/X 等系统级快捷键
    if ((e.ctrlKey || e.metaKey) && [65, 67, 86, 88].includes(e.keyCode)) {
        return; 
    }

    // 验证是否为主键盘数字 (48-57) 或 小键盘数字 (96-105)
    const isMainNumber = e.keyCode >= 48 && e.keyCode <= 57;
    const isNumpadNumber = e.keyCode >= 96 && e.keyCode <= 105;

    if (!isMainNumber && !isNumpadNumber) {
        e.preventDefault(); // 阻止非数字字符的输入
    }
});

示例 3：基于方向键的 DOM 元素位置控制

利用方向键（KeyCode 37-40）控制页面元素的移动，常用于小游戏或自定义交互组件的开发。

const movableElement = document.querySelector('.draggable-widget');
let posX = 0;
let posY = 0;
const step = 10; // 每次移动的像素值

window.addEventListener('keydown', (e) => {
    let isMoved = false;

    switch (e.keyCode) {
        case 37: // 左
            posX -= step;
            isMoved = true;
            break;
        case 38: // 上
            posY -= step;
            isMoved = true;
            break;
        case 39: // 右
            posX += step;
            isMoved = true;
            break;
        case 40: // 下
            posY += step;
            isMoved = true;
            break;
    }

    if (isMoved) {
        e.preventDefault(); // 阻止页面随方向键滚动
        movableElement.style.transform = `translate(${posX}px, ${posY}px)`;
    }
});