Vue.js非输入框聚焦时如何监听条码扫描器扫描事件

安全阿岳

2026-8-27

问题原因

你绑定的全局keypress事件不生效核心是两个原因：

keypress事件已经被现行Web标准废弃，现代浏览器仅在焦点落在可编辑元素（输入框、开启contenteditable的节点）上时才会派发该事件，非聚焦输入框的场景下根本不会触发这个事件，自然打不出日志。
部分页面内部的交互逻辑会在冒泡阶段拦截键盘事件，你默认在冒泡阶段绑定的监听很可能被其他元素的stopPropagation()拦截，无法传到document/window层。

解决方案

不需要额外依赖第三方库，按以下步骤实现即可全局捕获扫码输入，无需聚焦输入框：

替换监听事件，调整绑定配置
放弃使用keypress，也不要用触发时机偏后容易丢字符的keyup，改用keydown事件，绑定到document对象上，第三个参数传true开启捕获阶段监听，从事件派发的最外层就拦截，避免被页面其他元素阻断。同时记得在组件卸载时移除事件监听，避免内存泄漏。
通过特征区分扫码枪输入和人工键盘输入
扫码枪本质是模拟HID键盘设备输入，和人工输入有明确的特征差异，靠规则过滤就能避免把用户正常敲键盘的内容误判为扫码结果：

扫码枪输入字符的间隔极短，单字符间隔普遍在10ms以内，整串条码输入总时长不会超过50ms，远快于普通人打字速度
绝大多数扫码枪默认会在输入完条码内容后自动追加一个回车（Enter键）作为输入结束标识

Vue 实现代码参考
选项式API把对应逻辑放到mounted、beforeUnmount钩子即可，以下是组合式API写法：

import { onMounted, onUnmounted } from 'vue'

// 扫码内容缓存
let scanBuffer = ''
// 上次按键时间戳
let lastKeyTime = 0
// 输入间隔阈值，单位ms，超过这个值判定为人工输入，清空缓存
const INPUT_THRESHOLD = 50

function handleKeyDown(e) {
  const currentTime = Date.now()
  // 第一次按键直接记录时间，初始化缓存
  if (lastKeyTime === 0) {
    lastKeyTime = currentTime
    scanBuffer = ''
  }
  // 计算和上次按键的时间差
  const timeDiff = currentTime - lastKeyTime
  // 时间差超过阈值，判定是人工输入，重置缓存
  if (timeDiff > INPUT_THRESHOLD) {
    scanBuffer = ''
    lastKeyTime = currentTime
  }
  // 捕获到回车，判定扫码结束
  if (e.key === 'Enter') {
    // 缓存内容长度符合条码规则（一般条码至少6位以上，可根据自身业务调整长度判断条件），触发业务逻辑
    if (scanBuffer.length >= 6) {
      // 此处写拿到扫码结果后的业务处理逻辑
      console.log('捕获到扫码内容：', scanBuffer)
      // 如果当前有聚焦的输入框，不想让扫码内容自动填入输入框就放开下面这行注释
      // e.preventDefault()
    }
    // 重置状态
    scanBuffer = ''
    lastKeyTime = 0
    return
  }
  // 普通可见字符追加到缓存
  if (e.key.length === 1) {
    scanBuffer += e.key
  }
  lastKeyTime = currentTime
}

onMounted(() => {
  // 捕获阶段绑定keydown事件
  document.addEventListener('keydown', handleKeyDown, true)
})

onUnmounted(() => {
  // 组件卸载时移除监听
  document.removeEventListener('keydown', handleKeyDown, true)
  // 重置缓存状态
  scanBuffer = ''
  lastKeyTime = 0
})

补充优化点

如果你的扫码枪支持自定义配置，可以直接把扫码枪的输入结束后缀改成特殊组合键，识别准确率会更高，不用靠时间差判断也能100%区分扫码和人工输入。如果遇到特殊场景下扫码枪会输出功能键，只要在handleKeyDown里补充对应key值的处理逻辑即可。

内容的提问来源于stack exchange，提问作者s.br