JavaScript中如何确定KeyboardEvent来源设备，区分普通键盘与外接数字小键盘？

方案1：使用原生KeyboardEvent的location属性（零额外权限，优先推荐） #

• 标准DOM KeyboardEvent自带location字段，直接标识按键的物理位置：
  • 取值0（KeyboardEvent.DOM_KEY_LOCATION_STANDARD）：普通主键区按键
  • 取值3（KeyboardEvent.DOM_KEY_LOCATION_NUMPAD）：外接/内置数字小键盘按键
• 即使NumLock处于关闭状态，小键盘触发的按键事件location仍固定为3，不受输入字符影响
• 代码示例：

document.addEventListener('keydown', (e) => {
  if (e.location === KeyboardEvent.DOM_KEY_LOCATION_NUMPAD) {
    console.log('触发设备：数字小键盘');
  } else {
    console.log('触发设备：普通键盘区域');
  }
});

• 优势：无需申请任何特殊权限，兼容所有Chrome版本，99%的常规区分场景可直接满足
• 局限性：无法区分内置小键盘和外接独立小键盘，该场景需使用下方案2

方案2：获取设备VID/PID（精准设备识别，需特殊权限） #

如果需要唯一标识物理设备、获取USB厂商ID/产品ID，可调用Chrome扩展专属API实现：

1. 权限配置（manifest.json）
   需在扩展清单中声明对应权限，Manifest V3配置示例：

   {
     "manifest_version": 3,
     "permissions": ["hid", "usb"],
     "action": {}
   }
   

2. 设备枚举与识别
   调用chrome.hid.getDevices接口过滤出键盘类HID设备，即可拿到每个设备的vendorId、productId字段：

   // 先申请设备访问权限
   chrome.hid.getUserSelectedDevices({
     filters: [{ usagePage: 1, usage: 6 }] // 筛选通用桌面类下的键盘设备
   }, (devices) => {
     devices.forEach(device => {
       console.log('键盘设备 VID:', device.vendorId, 'PID:', device.productId);
       // 可将设备ID与后续按键事件做绑定匹配，实现精准设备区分
     });
   });
   

• 注意：该方案需要用户手动授权扩展访问对应输入设备，适合对设备识别精度要求极高的场景

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