如何用JavaScript检测物理键盘存在并区分Meta键？

核心思路 #

要实现只给拥有物理键盘的用户显示快捷键提示，需要结合用户交互行为和设备特征检测，单一方法很难做到100%准确，以下是几种实用方案的组合：

方案1：监听实际键盘输入（最准确） #

默认隐藏提示，当用户第一次按下物理键盘的功能键（Meta/CTRL）时，再显示提示。这种方式能确保只有真正使用键盘的用户看到提示。

let hasShownKeyboardPrompt = false;

document.addEventListener('keydown', (e) => {
  if (!hasShownKeyboardPrompt && (e.metaKey || e.ctrlKey)) {
    const promptElement = document.querySelector('.cmd-k-prompt');
    promptElement.textContent = `${e.metaKey ? 'CMD' : 'CTRL'}+K 打开搜索`;
    promptElement.style.display = 'block';
    hasShownKeyboardPrompt = true;
    // 只监听一次，避免重复触发
    document.removeEventListener('keydown', arguments.callee);
  }
});

优点：完全基于用户实际操作，不会误判；能自动区分CMD（Mac）和CTRL（其他平台）。
缺点：用户首次使用前看不到提示，可结合其他方案作为补充。

方案2：CSS媒体查询检测设备交互特征 #

利用CSS的pointer和hover媒体查询，判断设备是否更可能配备物理键盘（桌面设备通常支持精细指针和hover，移动触摸设备则相反）。

/* 默认隐藏提示 */
.cmd-k-prompt {
  display: none;
}

/* 当设备支持精细指针（如鼠标）和hover时显示 */
@media (pointer: fine) and (hover: hover) {
  .cmd-k-prompt {
    display: block;
  }
}

优点：纯CSS实现，无需JS；能覆盖绝大多数桌面设备场景。
缺点：无法识别平板外接物理键盘的情况（但这类设备通常也会支持pointer: fine）。

方案3：优化后的User Agent检测（作为 fallback） #

如果需要兼容旧浏览器，可优化UA检测逻辑，用正则简化代码：

const isDesktop = /Macintosh|Windows|CrOS|Linux(?!.*Android|.*Kindle)/i.test(navigator.userAgent);
if (isDesktop) {
  const shortcutKey = /Macintosh/i.test(navigator.userAgent) ? 'CMD' : 'CTRL';
  const promptElement = document.querySelector('.cmd-k-prompt');
  promptElement.textContent = `${shortcutKey}+K 打开搜索`;
  promptElement.style.display = 'block';
}

优点：兼容旧环境；能快速区分平台显示对应快捷键。
缺点：无法准确判断用户是否真的有物理键盘，UA可能被伪造。

组合最佳实践 #

推荐结合方案2和方案1：

1. 先用CSS媒体查询默认给桌面设备显示提示；
2. 再用键盘事件监听，确保平板外接键盘的用户也能看到提示（如果媒体查询没触发）；
3. 同时避免重复显示提示。

关于Keyboard API的说明 #

目前Keyboard API的layoutMap确实仅支持检测书写系统按键，无法识别Meta/CTRL等功能键，所以暂时无法用它实现物理键盘检测，后续可关注API的更新。

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