能否模拟RFID读卡器操作并捕获其触发的浏览器事件？

这类RFID读卡器本质是虚拟HID键盘设备，会按字符逐个输入卡号，最后自动发送回车键，无焦点时不触发输入。以下是模拟操作、事件捕获及自定义需求的实现方案：

一、模拟读卡器的输入行为 #

可以用JavaScript在浏览器中完整模拟读卡器的键盘输入流，包括字符逐个输入+回车的逻辑：

// 模拟卡号输入+回车的函数
function simulateRFIDCardRead(cardNumber) {
  // 单个字符的键盘事件触发逻辑
  const typeChar = (char) => {
    const events = ['keydown', 'keypress', 'keyup'];
    const activeEl = document.activeElement;
    // 仅向输入类控件发送事件
    if (!activeEl || !['INPUT', 'TEXTAREA'].includes(activeEl.tagName) && !activeEl.isContentEditable) return;

    events.forEach(eventType => {
      const eventConfig = {
        key: char,
        code: /\d/.test(char) ? `Digit${char}` : `Key${char.toUpperCase()}`,
        bubbles: true,
        cancelable: true
      };
      activeEl.dispatchEvent(new KeyboardEvent(eventType, eventConfig));
      // 同步更新输入框内容（原生键盘事件不会自动修改value）
      if (eventType === 'keyup') activeEl.value += char;
    });
  };

  // 按间隔输入卡号字符
  cardNumber.split('').forEach((char, idx) => {
    setTimeout(() => typeChar(char), idx * 50); // 50ms间隔模拟真实设备输入速度
  });

  // 最后触发回车键
  setTimeout(() => {
    const activeEl = document.activeElement;
    if (!activeEl) return;
    const enterEvent = new KeyboardEvent('keydown', {
      key: 'Enter',
      code: 'Enter',
      bubbles: true,
      cancelable: true
    });
    activeEl.dispatchEvent(enterEvent);
    // 可选：模拟表单提交行为
    if (activeEl.form) activeEl.form.dispatchEvent(new Event('submit'));
  }, cardNumber.length * 50 + 100);
}

// 使用示例：模拟读取卡号"1234567890"
simulateRFIDCardRead("1234567890");

二、捕获事件实现自定义需求 #

1. 阻止自动回车 #

监听全局键盘事件，通过卡号特征（长度、格式）判断是否为读卡器输入，进而阻止默认回车行为：

document.addEventListener('keydown', (e) => {
  if (e.key !== 'Enter') return;
  const target = e.target;
  // 仅针对输入类控件处理
  if (!['INPUT', 'TEXTAREA'].includes(target.tagName) && !target.isContentEditable) return;
  
  // 假设卡号为10位数字，可根据实际格式调整判断逻辑
  if (/^\d{10}$/.test(target.value)) {
    e.preventDefault(); // 阻止表单提交、文本域换行等默认行为
    console.log('已拦截读卡器自动回车');
  }
});

2. 指定输入焦点 #

可以强制将输入焦点锁定到目标控件，确保卡号输入到指定位置：

// 页面加载后自动聚焦目标输入框
window.addEventListener('load', () => {
  const targetInput = document.getElementById('card-input');
  targetInput?.focus();
});

// 或者检测读卡器输入起始字符时，强制切换焦点
document.addEventListener('keydown', (e) => {
  // 假设卡号以"88"开头，可根据实际前缀调整
  if (e.key === '8' && document.activeElement.id !== 'card-input') {
    const targetInput = document.getElementById('card-input');
    if (targetInput) {
      targetInput.focus();
      targetInput.value += e.key;
      e.preventDefault(); // 阻止原焦点控件接收字符
    }
  }
});

3. 完整捕获卡号输入流 #

通过全局键盘事件拼接卡号，实现全流程监控：

let cardBuffer = '';
const CARD_LENGTH = 10; // 实际卡号长度

document.addEventListener('keydown', (e) => {
  // 仅捕获数字键
  if (e.key.match(/^\d$/)) {
    cardBuffer += e.key;
    // 输入长度达标时执行自定义逻辑
    if (cardBuffer.length === CARD_LENGTH) {
      console.log('读取完整卡号:', cardBuffer);
      // 这里可添加卡号验证、数据提交等逻辑
      cardBuffer = ''; // 重置缓冲区
    }
  } else if (e.key === 'Enter' && cardBuffer.length > 0) {
    // 处理提前触发回车的情况
    console.log('读取卡号（含回车）:', cardBuffer);
    cardBuffer = '';
  }
});

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