Web应用热键适配：如何根据修饰键与键码获取当前布局对应符号？

要实现布局无关的热键绑定（基于KeyboardEvent.code），同时显示适配用户当前键盘布局的按键提示，核心思路是将绑定的code（物理键位标识）转换为对应布局下的key值（按键实际输出的字符/功能名称），以下是两种可行的实现方案：

方案一：通过模拟KeyboardEvent获取对应key值 #

利用KeyboardEvent构造函数生成指定code的按键事件，读取事件的key属性即可得到当前布局下的按键标识。这种方法适用于所有类型的按键（包括功能键和可打印字符）。

// 将code转换为当前布局对应的按键标识
function getKeyFromCode(code) {
  const tempElement = document.createElement('div');
  let keyValue = '';

  // 监听keydown事件获取key值
  tempElement.addEventListener('keydown', (e) => {
    keyValue = e.key;
    e.preventDefault();
  }, { once: true });

  // 构造并触发指定code的keydown事件
  const keydownEvent = new KeyboardEvent('keydown', { code });
  tempElement.dispatchEvent(keydownEvent);

  // 对修饰键进行友好缩写转换
  const modifierMap = {
    'Control': 'Ctrl',
    'Shift': 'Shift',
    'Alt': 'Alt',
    'Meta': 'Win' // macOS下可调整为'Cmd'
  };
  return modifierMap[keyValue] || keyValue;
}

// 使用示例：绑定KeyZ作为撤销的按键，显示对应布局的提示
const undoKey = getKeyFromCode('KeyZ');
document.querySelector('.undo-tip').textContent = `撤销（Ctrl + ${undoKey}）`;

方案二：利用隐藏输入元素获取可打印字符 #

如果仅处理可打印字符（如字母、符号），可以通过创建隐藏的input元素，模拟按键后读取输入内容，这种方法更贴近真实输入场景。

// 获取可打印字符对应的当前布局按键
async function getPrintableKeyFromCode(code) {
  const input = document.createElement('input');
  input.style.cssText = 'position: fixed; opacity: 0; pointer-events: none;';
  document.body.appendChild(input);
  input.focus();

  let inputValue = '';
  await new Promise(resolve => {
    input.addEventListener('input', () => {
      inputValue = input.value;
      resolve();
    }, { once: true });

    // 触发按键事件
    input.dispatchEvent(new KeyboardEvent('keydown', { code, bubbles: true }));
    input.dispatchEvent(new KeyboardEvent('keyup', { code, bubbles: true }));
  });

  document.body.removeChild(input);
  return inputValue;
}

// 使用示例
getPrintableKeyFromCode('KeyZ').then(key => {
  console.log(`撤销（Ctrl + ${key}）`);
});

注意事项 #

1. 修饰键处理：修饰键（Ctrl/Shift/Alt等）的key值是固定的，可通过映射表转换为用户更熟悉的缩写（如Control→Ctrl）。
2. 浏览器兼容性：部分浏览器对模拟事件有安全限制，若模拟失败可 fallback 到code对应的默认按键（如KeyZ默认显示Z），并提供自定义热键的入口。
3. 功能键适配：对于Enter、Backspace这类非打印功能键，直接使用key值即可（如Enter、Backspace）。

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