如何在JavaScript中检测用户是否未连接物理键盘？

这个需求确实很实用——毕竟没人想在已经连了物理键盘的时候还弹出自定义软键盘。下面给你几个靠谱的解决方案，从最标准的现代API到兼容老浏览器的 fallback 都有：

现在不少现代浏览器已经支持Navigator.keyboard接口，其中的hasPhysicalKeyboard属性可以直接异步返回当前设备是否连接了物理键盘，这是最精准的方法。

代码示例：

// 封装检测逻辑
async function hasConnectedPhysicalKeyboard() {
  // 先判断浏览器是否支持该API
  if (!navigator.keyboard) {
    return false;
  }
  // 异步获取物理键盘状态
  return await navigator.keyboard.hasPhysicalKeyboard;
}

// 给目标div绑定聚焦/失焦事件
const targetDiv = document.querySelector('div[tabindex="0"]');

targetDiv.addEventListener('focus', async () => {
  const hasPhysical = await hasConnectedPhysicalKeyboard();
  if (!hasPhysical) {
    // 没有物理键盘，显示自定义软键盘
    showCustomKeyboard();
  }
});

targetDiv.addEventListener('blur', () => {
  // 失焦时无论如何都隐藏自定义键盘
  hideCustomKeyboard();
});

注意：这个API是异步的，需要用async/await处理。目前Chrome、Edge（包括移动端）都支持，但Safari等部分浏览器还未适配，所以需要搭配 fallback 方案。

如果遇到不支持Navigator.keyboard的浏览器，可以结合以下两种思路间接判断：

• 触摸设备+物理按键检测：
  先通过媒体查询判断设备是否是触摸优先（比如手机、平板），再监听全局keydown事件——如果用户有物理键盘输入，就标记为已连接物理键盘，后续不再弹出自定义键盘。

  代码示例：

  let hasPhysicalKeyboard = false;
  // 判断是否是触摸优先设备
  const isTouchFirstDevice = window.matchMedia('(pointer: coarse)').matches;
  
  // 监听全局按键事件，一旦检测到物理按键输入，标记状态
  window.addEventListener('keydown', () => {
    hasPhysicalKeyboard = true;
  });
  
  const targetDiv = document.querySelector('div[tabindex="0"]');
  targetDiv.addEventListener('focus', () => {
    // 仅当是触摸设备且未检测到物理键盘时，显示自定义键盘
    if (isTouchFirstDevice && !hasPhysicalKeyboard) {
      showCustomKeyboard();
    }
  });
  
  targetDiv.addEventListener('blur', () => {
    hideCustomKeyboard();
  });
  

  这种方法的小缺点是第一次聚焦时可能无法立刻判断，但用户只要用物理键盘输入一次，后续就能准确识别，大部分场景下够用。

• 辅助设备类型判断（仅作补充）：
  可以通过userAgent粗略判断是否是移动设备，但这种方法容易因UA更新失效，只建议作为辅助参考：

  function isMobileDevice() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  }
  

• 有些设备（比如带外接键盘的平板）会在使用过程中切换物理键盘的连接状态，你可以尝试监听navigator.keyboard的keychange事件（目前支持度有限），来实时更新键盘状态。
• 测试时记得覆盖多种场景：比如手机连蓝牙键盘、平板插拔键盘等，确保逻辑符合预期。

内容的提问来源于stack exchange，提问作者One Guy Hacking