在JavaScript中检测输入数据的设备：React场景下多扫码枪输入源识别疑问

你的需求是完全可行的，但当前依赖<Input>的onChange事件的思路有个核心问题：当条码扫描器工作在HID键盘模拟模式时，浏览器收到的只是普通的键盘输入事件，根本不知道这些字符来自哪台设备。要区分输入来源，你需要绕过系统的键盘模拟层，直接和扫描器的USB/HID设备通信。

下面分两种常见的扫描器工作模式，给你具体的实现方案：

情况1：扫描器是HID键盘模式（大部分消费级扫描器默认模式） #

这种模式下扫描器会把条码内容转换成键盘按键输入，这也是你的onChange能收到数据的原因，但浏览器无法通过键盘事件关联设备。这时候你需要用WebHID API来直接读取扫描器的原始HID输入报告，同时获取设备的唯一标识（vendorId、productId或设备名称）来区分来源。

实现步骤： #

1. 请求用户授权访问HID设备
2. 监听设备的inputreport事件，直接获取扫描器的原始数据
3. 解析HID报告得到条码内容，同时记录来源设备信息

示例代码（React环境）： #

import { useEffect, useRef } from 'react';

// 解析HID键盘报告（不同扫描器格式可能略有差异，需参考设备文档）
function parseHIDKeyboardReport(data) {
  // 简单示例：提取按键对应的ASCII字符（仅针对标准键盘报告格式）
  const keyCodes = data.subarray(2); // 跳过报告ID和修饰位
  let text = '';
  for (const code of keyCodes) {
    if (code === 0) continue; // 空按键忽略
    // 这里需要映射HID按键码到字符，比如0x04是'a'，0x1E是'1'等，可参考HID键盘码表
    const char = String.fromCharCode(code + 0x40); // 简化映射，实际需完善
    text += char;
  }
  return text;
}

async function requestHIDDevices() {
  if (!('hid' in navigator)) {
    alert('你的浏览器不支持WebHID API，请使用Chrome/Edge等现代浏览器');
    return;
  }

  // 请求访问HID设备，可根据扫描器的vendorId/productId过滤，不知道的话先放开所有键盘类设备
  const devices = await navigator.hid.requestDevice({
    filters: [{ usagePage: 0x01, usage: 0x06 }] // 匹配HID键盘设备
  });

  devices.forEach(async (device) => {
    await device.open();
    // 监听设备的输入报告事件
    device.addEventListener('inputreport', (event) => {
      const { device, data } = event;
      const scannedText = parseHIDKeyboardReport(data);
      if (scannedText) {
        // 更新Input组件的值
        const inputRef = document.getElementById('scanner-input');
        if (inputRef) inputRef.value = scannedText;
        // 打印来源设备信息，这里可以用productName或vendorId+productId作为唯一标识
        console.log(`数据来自设备：${device.productName}（${device.vendorId}:${device.productId}）`);
      }
    });
  });
}

function ScannerInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    // 组件挂载时请求设备权限
    requestHIDDevices();
  }, []);

  return <input ref={inputRef} id="scanner-input" placeholder="扫描条码..." />;
}

export default ScannerInput;

情况2：扫描器是USB串口模式（部分工业级扫描器支持） #

如果你的扫描器支持串口模式（通过USB虚拟串口传输数据），那可以基于你现有的navigator.usb来实现：

1. 请求用户授权访问USB设备
2. 打开设备的串口接口，配置波特率等参数
3. 监听设备的数据传输事件，通过设备的标识区分来源
4. 解析串口数据得到条码内容

核心思路： #

和WebHID类似，你需要直接和设备建立通信，而不是依赖系统的键盘模拟。每个USB设备都有唯一的vendorId和productId，可以用这两个值来区分两台扫描器。

关键注意事项 #

• WebHID/USB API需要HTTPS环境：本地开发时localhost可以正常使用，但部署到线上必须用HTTPS
• 用户授权：必须用户手动点击授权按钮才能访问设备，浏览器不会自动授权
• 设备兼容性：不同品牌的扫描器HID报告格式可能不同，需要参考设备的官方文档来调整解析逻辑
• 替代方案：如果无法使用WebHID/USB，部分高端扫描器支持自定义前缀/后缀，你可以让两台扫描器分别添加不同的前缀，然后在onChange里通过前缀判断来源，但这种方案不够可靠，容易出错

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