前言

找了很多相关的教程不太好用，汲取各家之长总结精简了一下

原理

扫码枪扫描到的条形码每一位会触发一次onkeydown事件
比如扫描条码位‘1234567890’的条形码，会连续执行10次onkeydown事件
条码扫描到最后一位，会直接触发Enter

代码

支持vue

data() {
    return {
        nextCode: '',
        lastTime: '',
        code: ''
    }
},
created() {
    // 添加键盘监听事件
    document.addEventListener('keydown', this.getBarCode)

},
// 销毁页面时销毁监听
destroyed() {
    document.removeEventListener('keydown', this.getBarCode)
},
methods: {
    // 通过扫码枪获取条形码
    getBarCode(e) {
        let nextCode
        let nextTime = ''
        const lastTime = this.lastTime
        let code = this.code
        if (window.event) {
            // IE
            nextCode = e.keyCode
        } else if (e.which) {
            // Netscape/Firefox/Opera
            nextCode = e.which
        }
        nextTime = new Date().getTime()
        // 字母上方 数字键0-9 对应键码值 48-57; 数字键盘 数字键0-9 对应键码值 96-105
        if (
            (nextCode >= 48 && nextCode <= 57) ||
            (nextCode >= 96 && nextCode <= 105)
        ) {
            const codes = {
                '48': 48,
                '49': 49,
                '50': 50,
                '51': 51,
                '52': 52,
                '53': 53,
                '54': 54,
                '55': 55,
                '56': 56,
                '57': 57,
                '96': 48,
                '97': 49,
                '98': 50,
                '99': 51,
                '100': 52,
                '101': 53,
                '102': 54,
                '103': 55,
                '104': 56,
                '105': 57
            }
            nextCode = codes[nextCode]
            nextTime = new Date().getTime()
        }
        // 第二次输入延迟两秒，删除之前的数据重新计算
        if (nextTime && lastTime && nextTime - lastTime > 2000) {
            code = String.fromCharCode(nextCode)
        } else {
            code += String.fromCharCode(nextCode)
        }
        // 保存数据
        this.nextCode = nextCode
        this.lastTime = nextTime
        this.code = code
        // 键入Enter
        if (e.which === 13) {
            // 判断 code 长度（这里就获取到条码值了，以下业务自由发挥）
            code = code.trim()
            if (code.length == 13) {
                this.$message('A类条码:' + code);
            } else if (code.length == 23) {
                this.$message('B类条码:' + code);
            } else if (code.length == 0) {
                this.$message('请输入条码');
            } else {
                this.$message('条码不合法：' + code);
            }

            // this.getSkuByCode(code) // 执行另一个业务方法

            // 键入回车务必清空code值
            this.code = ''
            return false
        }
    }
}

作者：MG516
来源：CSDN
原文：https://blog.csdn.net/weixin_39856066/article/details/81945431
版权声明：本文为博主原创文章，转载请附上博文链接！