如何解决JavaScript中document[keypress]捕获Zebra MC330M扫描器字符丢失问题

我之前处理过类似的扫描器输入问题，你遇到的核心问题是扫描器模拟的快速按键序列在document级别的keypress事件中没有被完整捕获——普通input能正常工作，是因为input元素本身会自动收集输入字符，且焦点在input上时事件传递更直接。下面给你几个优先用JS/jQuery实现的解决方案：

方案1：基于按键间隔的全局扫描内容捕获（推荐） #

扫描器的按键速度远快于手动输入，我们可以通过记录按键间隔来区分扫描输入和手动输入，同时缓存扫描的字符，直到触发Enter键时统一处理：

// 初始化缓存和时间记录变量
let scanBuffer = '';
let lastKeyTimestamp = 0;
// 扫描器按键间隔阈值（可根据实际测试调整，一般50-100ms即可）
const SCAN_SPEED_THRESHOLD = 80;

// 用addEventListener绑定keydown事件（比onkeypress兼容性更好）
document.addEventListener('keydown', function(e) {
  const currentTime = Date.now();
  
  // 捕获Enter键，处理缓存的扫描内容
  if (e.key === 'Enter') {
    e.preventDefault(); // 阻止默认的页面跳转/表单提交行为
    if (scanBuffer.length > 0) {
      console.log('扫描到的完整内容:', scanBuffer);
      // 这里替换成你的业务逻辑，比如把内容插入输入框、发送请求等
      scanBuffer = ''; // 处理完成后清空缓存
    }
  } 
  // 捕获单个可见字符的按键（排除功能键）
  else if (e.key.length === 1) {
    // 判断按键间隔：如果是快速连续按键，判定为扫描器输入
    if (currentTime - lastKeyTimestamp < SCAN_SPEED_THRESHOLD) {
      scanBuffer += e.key;
    } else {
      // 如果是手动输入，重置缓存（可根据需求调整，比如保留手动输入的字符）
      scanBuffer = e.key;
    }
    lastKeyTimestamp = currentTime;
  }
});

为什么这个方案有效？ #

扫描器发送的字符按键间隔通常在几十毫秒内，而手动输入的间隔一般会超过100ms，通过这个阈值我们可以精准区分两种输入场景，确保扫描的字符被完整缓存，直到Enter触发时一次性处理。

方案2：兼容keypress事件的全局捕获 #

如果你坚持使用keypress事件，可以通过兼容不同浏览器的字符编码方式来捕获内容，同时注意事件的冒泡传递：

let scanData = '';

// 用addEventListener替代直接赋值onkeypress，避免覆盖其他事件绑定
document.addEventListener('keypress', function(e) {
  e = e || window.event;
  // 兼容不同浏览器的字符编码获取方式
  const pressedChar = String.fromCharCode(
    e.which || e.keyCode || e.charCode
  );

  // 扫描器的Enter可能是回车(\r)或换行(\n)，都视为结束符
  if (pressedChar === '\r' || pressedChar === '\n') {
    console.log('扫描内容:', scanData);
    scanData = '';
    return false; // 阻止默认行为
  } else {
    scanData += pressedChar;
  }
});

额外注意事项 #

1. 页面焦点问题：确保扫描时页面处于激活状态（比如点击页面空白处获得焦点），否则document级别的事件可能无法捕获到扫描器的按键。
2. 扫描器配置验证：确认扫描器确实只发送ASCII字符+末尾Enter，没有额外的前缀/后缀字符（可以在记事本中测试扫描，看输出内容是否正常）。
3. jQuery版本适配：如果用jQuery，只需要把事件绑定改成$(document).on('keydown', function(e) { ... })即可，逻辑完全一致。

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