判断扫码输入和手动输入

项目中使用到了扫码枪，记录下使用方法。扫码枪也是和键盘一样的一种输入设备，一般扫码结束后会自带回车，键入的速度会比手动输入快，可以通过判断输入间隔时间判断是扫码输入还是手动输入。用扫码枪时输入法需要切换到英文，中文状态下会有bug出现。

html中的一个input

<input class="sweep-box" placeholder="扫描条码"
           ref="barcodeBox"
           type="text"
           @keyup="sweepBarcode($event)"
           @keydown="sweepDown">

js相关代码

export default = {
  data() {
    return {
      keyUpTime: '', 
      keyDownTime: '', // 按键按下的时间
      spanTime: 20, // 一个按键按下到释放的时间 小于等于则是扫码，大于则是手动输入
      oneKeyTime: '', // 一次按键之间的间隔时间
      twoKeyTime: '', // 两次按键之间间隔
      code: '',
    }  
  },
  methods: {
    // 监听按键按下
    sweepDown() {
      let curTime = Date.now()
      if (this.keyDownTime !== '' && this.keyDownTime !== NaN) {
        this.twoKeyTime = curTime - this.keyDownTime
      }
      this.keyDownTime = curTime
    },
    // 监听按键释放
    sweepBarcode(e) {
      let keyUpTime = Date.now()
      this.oneKeyTime = keyUpTime - this.keyDownTime
      let isHand = this.checkHandInput();
      if (!isHand) {
         // 扫描输入状态
        // 按键的值可以通过 e.key得到 扫码枪一般扫码结束后自带回车，所以可以通过判断 e.key 的值是否为 Enter 来设置扫码结束后的操作 
        this.sweep(e)
      } else {
        // 手动输入状态
        if(e.key === 'Enter') {
          // 按下回车后的操作
        }
      }
    },
    // 判断是扫码还是手动输入
    checkHandInput() {
      if ((this.oneKeyTime > this.spanTime)) {
        // 手动输入
        return true;
      } else {
        // 扫码输入
        return false;
      }
    },
    sweep(e, type) {
    //  使用中是 win10系统的一个触控屏幕，发现扫码结束在回车后会有个 ArrowDown ，所以做了一下处理。
      if (e.key !== 'ArrowDown') {
          // 每次重新扫码时 清空输入框
         this.$refs.barcodeBox.value = ''
      }
      if (this.code) {
        if (e.key === 'Enter' || e.keyCode == 13 || e.which == 13) {
          // 得到扫码的值
          this.code = this.handleShift(this.code)
          return
        }
        this.code = this.code + e.key
      } else {
        if (e.key === 'ArrowDown') {
          this.code = ''
        } else {
          this.code = e.key
        }
      }
    },
    // 在实际操作中发现在扫码过程中通过 e.key去会去扫码内容时，遇到大写字母时会得到 Shift + 小写字母的组合，如 C 的话会是 Shiftc，所得会有不同，但是如果直接取 input 中的值则是没有问题。
    // 所以在用 e.key 的方式获取扫码内容时对 shift 进行以下处理。
   // 通过e.key得到所有扫码的值后，通过Shift 对值进行分割，之后得到一个数组，然后对每个数组中每个元素中的第一个元素进行大写转换。
    handleShift(str) {
      // 判断第一个字母是否需要大写
        let string = str.slice(0, 5)
        let upperArr
        if (string === 'Shift') {
          let newArr = str.split('Shift')
          upperArr = newArr.map(item => {
            let item1
            if (item) {
              item1 = item.slice(0, 1).toUpperCase() + item.slice(1)
            }
            return item1
          })
        } else {
          let newArr = str.split('Shift')
          let headItem = newArr.slice(0, 1)
          let body = newArr.slice(1)
          let arr1 = body.map(item => {
            let item1 = item.slice(0, 1).toUpperCase() + item.slice(1)
            return item1
          })
          upperArr = headItem.concat(arr1)
        }
        return upperArr.join('')
      },
  }
}

参考了 git 上的一个关于扫码的代码
https://github.com/bigbignerd/jQuery_barcode_listener/blob/master/src/jquery.barcode.js