JavaScript：如何为任意键盘布局生成可读快捷键名称？

我之前开发富Web应用时也被这个问题卡过好一阵！要适配不同键盘布局，同时把键盘事件转成用户能看懂的Ctrl + Alt + Y这类格式，确实得避开keypress和charCode这些坑，下面分享几个亲测有效的方案：

1. 核心思路：用key属性替代code/charCode #

keydown事件里的key属性是基于当前键盘布局返回的按键实际输入（或按键名称），比如在AZERTY布局下按Y键对应的位置，key会返回Z，而code只会返回KeyY（固定对应键盘位置）——这正是我们需要的布局感知特性！

而charCode已经被MDN标记为废弃，完全不用考虑了。

2. 组合修饰键与普通按键 #

要生成完整的可读快捷键，需要把修饰键（Ctrl/Alt/Shift/Meta）和普通按键组合起来：

• 先通过事件的ctrlKey/altKey/shiftKey/metaKey属性判断是否按下了修饰键
• 再用key属性获取当前按键的可读名称
• 最后把它们拼接成标准格式

这里有个实用的工具函数示例：

function formatShortcut(event) {
  const modifiers = [];
  
  // 按常用顺序添加修饰键
  if (event.ctrlKey) modifiers.push('Ctrl');
  if (event.altKey) modifiers.push('Alt');
  if (event.shiftKey) modifiers.push('Shift');
  // Meta键在Windows是Win，Mac是Command，统一成Cmd更通用
  if (event.metaKey) modifiers.push('Cmd');

  // 处理特殊按键的友好显示
  const specialKeys = {
    'Enter': 'Enter',
    'Backspace': 'Backspace',
    'Delete': 'Delete',
    'ArrowUp': '↑',
    'ArrowDown': '↓',
    'ArrowLeft': '←',
    'ArrowRight': '→',
    'Escape': 'Esc'
  };
  // 普通按键转大写，特殊按键用映射表的友好名称
  const keyPart = specialKeys[event.key] || event.key.toUpperCase();

  return modifiers.length > 0 
    ? `${modifiers.join(' + ')} + ${keyPart}` 
    : keyPart;
}

// 使用示例
document.addEventListener('keydown', (e) => {
  // 按需阻止默认行为，比如避免浏览器自带快捷键冲突
  if (e.ctrlKey || e.altKey) e.preventDefault();
  console.log(formatShortcut(e)); // 输出类似 "Ctrl + Alt + Y"
});

3. 适配自定义配置需求 #

如果需要支持用户自定义快捷键，可以：

• 让用户在设置界面选择修饰键+按键，用上面的函数把用户选择转成存储用的字符串
• 存储时可以同时保存key和code（可选），但匹配时优先用key来适配布局
• 提供重置默认快捷键的选项，方便用户恢复

4. 注意事项 #

• 避免用keypress：它只对可打印字符触发，而且已经被逐步淘汰
• 处理重复触发：按住按键不放会连续触发keydown，可以加个状态变量判断是否是重复触发，避免多次响应
• 测试不同布局：最好在QWERTY、AZERTY、Dvorak等布局下测试，确保key属性返回符合预期

内容的提问来源于stack exchange，提问作者Aloso