js通过扫码枪快速录入的实现

扫码枪是一种输入设备，它通过扫描二维码或条形码来获取信息。扫码枪的工作原理是利用光电传感器来捕捉条码的图案，并将其转化为数字信号。比如扫描为1234567890 的二维码，会连续执行10次输入事件，并在最后一位会追加输入回车键。

1、需要解决的问题

a)  事件在哪里注册

通常我们会在input元素上增加回车键即可，但是考虑到中文输入法问题，扫码枪最后一下会执行回车键，会导致结果不正确，所以我们要注册全局事件，因为我们要在页面任意位置识别，所以我们需要把事件放到 window 上面。

b)  不影响页面上其他的input、textarea等元素

全局注册时会影响页面中其他input、textarea等元素，比如回车键的处理，所以我们在监听事件中将这些元素给排除。

c)  捕捉扫码枪的方法

扫码抢输入特点为快速录入并自动在输入结束触发回车按键，人为按键输入相对扫码枪输入较慢，手动触发回车事件。码枪每次录入间隔是8-10毫秒左右，一般不超过30毫秒，手动录入为则在80+毫秒左右，那么我们就可以用这个时间差来做区分手动录入和扫码枪录入，所以我们可以通过输入监听事件来设置每个输入的时间戳。

代码逻辑如下

// 事件列表
let eventList = [];

const onKeypressHandle = ({ keyCode, key, target, srcElement }) => {
  const { tagName } = target || srcElement;
  // 不影响输入标签
  if (tagName === 'INPUT' || tagName === 'TEXTAREA') {
    eventList = [];
    return;
  }

  // 回车键获取最终结果
  if (keyCode === 13) {
    eventList = [];
  } else {
    eventList.push({
      key,
      timestamp: Date.now(),
    });
  }
};
window.addEventListener('keypress', onKeypressHandle);

2、获取扫码枪的内容

上述代码中将每个值以及输入的当前时间戳保存到数组中了，所以这里直接循环判断相邻的时间差是否小于30即可。

代码逻辑如下

const getScanCode = (list) => {
  const { length } = list;

  // 小于一位不处理，一般扫码结果不会为1位
  if (length <= 1) return '';

  let res = '';
  for (let i = 0; i < length; i += 1) {
    const last = list[i - 1];
    const current = list[i];

    if (last && current.timestamp - last.timestamp >= 30) return '';

    res += current.key;
  }

  // 返回结果，这里可以做一些业务上的校验等
  return res;
};

3、最后得到最终代码

// 事件列表
let eventList = [];

// 获取扫码结果
const getScanCode = (list) => {
  const { length } = list;

  // 小于一位不处理，一般扫码结果不会为1位
  if (length <= 1) return '';

  let res = '';
  for (let i = 0; i < length; i += 1) {
    const last = list[i - 1];
    const current = list[i];

    if (last && current.timestamp - last.timestamp >= 30) return '';

    res += current.key;
  }

  // 返回结果，这里可以做一些业务上的校验等
  return res;
};

// keypress事件方法回调
const onKeypressHandle = ({ keyCode, key, target, srcElement }) => {
  const { tagName } = target || srcElement;
  // 不影响输入标签
  if (tagName === 'INPUT' || tagName === 'TEXTAREA') {
    eventList = [];
    return;
  }

  // 回车键获取最终结果
  if (keyCode === 13) {
    // 得到结果，可以做一些业务操作
    const code = getScanCode(eventList);
    eventList = [];

    // do something
  } else {
    eventList.push({
      key,
      timestamp: Date.now(),
    });
  }
};
window.addEventListener('keypress', onKeypressHandle);

完成~