js监听页面扫码枪

openCodeListDialog(row) {
console.log(row)
     this.$refs.codeList.open(row)
 },
 /* 监听输入 判断通过isScan判断 */
 inputCode(v) {
   console.log(v)
     if (this.isScan) return;
     this.code = v
 },
 //处理扫码枪获取的数据
 dealScan(code) {
     this.isScan = false
     this.sourceCode = code.substring(code.length - 12);//取出后12位 
 },
 scanCode() {
   console.log(1)
     let lastTime = null;
     let nextTime = null;
     let code = '';
     let timer = ''
     //监听数据录入 通过判断输入数据的速度来判读是手动输入还是扫码枪录入,
     //这里有一个问题 当用户同时按下两个按键或者故意以高速录入数据时也会被判定为扫码枪输入
     document.onkeydown = e => {
       console.log(e)
         let keycode = e.keyCode || e.which || e.charCode;
         nextTime = new Date();
         if (keycode === 13) {
             if (lastTime && (nextTime - lastTime < 30)) {
                 // 扫码枪
                 this.dealScan(code)
             } else {
                 // 键盘
                 console.log('键盘输入')
             }
             code = '';
             lastTime = null;
             e.preventDefault();
         } else {
             if (!lastTime) {
                 code = String.fromCharCode(keycode);
             } else {
                 if (nextTime - lastTime < 30) {
                     code += String.fromCharCode(keycode);
                     item.isScan = true
                 } else {
                     code = '';
                     item.isScan = false
                 }
             }
             lastTime = nextTime;
         }
         //添加定时器 防止用户输入过快导致的误判 
         timer = setTimeout(_ => {
             clearTimeout(timer)
             this.isScan = false
         }, 100)
     };

 },

//监听扫码枪
function ListenScanCodeGun() {
    var barCode = '';
    var lastTime = 0;
    function ClearBarCode() {
        barCode = '';
        lastTime = 0;
    }
    window.addEventListener('keypress', function (e) {
        console.log("监听开始");
        e = e || window.event;
        var currCode = e.keyCode || e.which || e.charCode;
        var currTime = new Date().getTime();
        if (lastTime > 0) {
            if (currTime - lastTime <= 100) {
                barCode += String.fromCharCode(currCode);
            }
            else if (currTime - lastTime > 500) {
                // 输入间隔500毫秒清空
                ClearBarCode();
            }
        }
        else  // 第一次按键
        {
            barCode = String.fromCharCode(currCode);
        }
        lastTime = currTime;

        if (currCode == 13)  // 回车
        {
            if (barCode && barCode.length >= 8) {
                // 这里得到码，做下一步业务处理
                console.log("最终编号：" + barCode);
            }
            // 回车输入后清空
            ClearBarCode();
        }
    });
}

<script>
export default {
  data() {
    return {
    }
  },
  mounted() {
    // 监听按键
    var code = ''
    var lastTime, nextTime // 上次时间、最新时间
    var lastCode, nextCode // 上次按键、最新按键
    document.onkeypress = (e) => {
      // 获取按键
      if (window.event) { // IE
        nextCode = e.keyCode
      } else if (e.which) { // Netscape/Firefox/Opera
        nextCode = e.which
      }
      // 如果触发了回车事件(扫码结束时间)
      if (nextCode === 13) {
        if (code.length < 3) return // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有

        this.codeFind(code) // 获取到扫码枪输入的内容，做别的操作

        code = ''
        lastCode = ''
        lastTime = ''
        return
      }
      nextTime = new Date().getTime() // 记录最新时间
      if (!lastTime && !lastCode) { // 如果上次时间和上次按键为空
        code += e.key // 执行叠加操作
      }
      // 如果有上次时间及上次按键
      if (lastCode && lastTime && nextTime - lastTime > 30) { // 当扫码前有keypress事件时,防止首字缺失
        code = e.key
      } else if (lastCode && lastTime) {
        code += e.key
      }
      lastCode = nextCode
      lastTime = nextTime
    }
  },
  methods: {
    // 业务逻辑根据项目更改
    codeFind(code) {
      if ([123456, 789101].indexOf(code) >= 0) {
        alert('code已经存在')
      }
    }
  }
}
</script>

import store from './store'
function scanCode() {
  let str = ''
  document.onkeydown = function() {
    if (event.target.tagName !== 'BODY') {
      str = ''
    } else {
      if (event.keyCode !== 13) {
        if (event.keyCode >= 32 && event.keyCode <= 126) {
          let k = event.key
          str += k
        }
      } else {
        if (str) {
          store.commit('scanCode/SET_SCANSTRING', str)
        }
        str = ''
      }
    }
  }
}

export default scanCode()

import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
import './scanCode' // 扫码

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

export default {
  computed: {
    scanString() {
      return this.$store.getters.scanString
    }
  },
  watch: {
    scanString(s) {
      if (s) {
        setTimeout(() => {
          // 触发事件 你要做的事
          alert(s)
          // 执行结束后重复为空
          this.$store.commit('scanCode/SET_SCANSTRING', '')
        }, 100)
      }
    }
  }
}

// 监听按键
var code = ''
var lastTime, nextTime // 上次时间、最新时间
var lastCode, nextCode // 上次按键、最新按键
document.onkeypress = (e) => {
  // 获取按键
  if (window.event) { // IE
    nextCode = e.keyCode
  } else if (e.which) { // Netscape/Firefox/Opera
    nextCode = e.which
  }
  // 如果触发了回车事件(扫码结束时间)
  if (nextCode === 13) {
    if (code.length < 3) return // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有

    this.codeFind(code) // 获取到扫码枪输入的内容，做别的操作

    code = ''
    lastCode = ''
    lastTime = ''
    return
  }
  nextTime = new Date().getTime() // 记录最新时间
  if (!lastTime && !lastCode) { // 如果上次时间和上次按键为空
    code += e.key // 执行叠加操作
  }
  // 如果有上次时间及上次按键
  if (lastCode && lastTime && nextTime - lastTime > 30) { // 当扫码前有keypress事件时,防止首字缺失
    code = e.key
  } else if (lastCode && lastTime) {
    code += e.key
  }
  lastCode = nextCode
  lastTime = nextTime
}