扫码枪扫码

做了个扫码枪扫码出库的功能

let gap = 0;
let keyupLastTime: any
let realBarcode = ''
const keyUp = () => {
    document.onkeyup = (e) => {
        //  formRef.value.validate((valid: boolean) => {
            // if (valid) {
                if (keyupLastTime) {
                    gap = new Date().getTime() - keyupLastTime;
                    if (gap > 50) {
                        gap = 0;
                        realBarcode = "";
                    }
                }
                keyupLastTime = new Date().getTime();
                // 输入法会触发keyup事件，key为Process，跳过即可
                if (e.key != "Process" && gap < 50) {
                    if (e.key.trim().length == 1) {
                        // 输入单个字母或者数字
                        realBarcode += e.key;
                    } else if (e.key.trim() == "Enter") {
                       //自己的业务代码

                    }
                }
            // }
        // })
    }
}

之前的思路是监听键盘弹起事件，记录下快速弹起50ms键盘弹起（避免用户按键盘的数据被记录造成扫码错误）（50ms---扫码枪的本质就是相当于将二维码或条形码记录 数字和字母模拟按键盘输入的，扫码枪是快速扫码的，所以我们记录的50ms内）

但是这种会有问题，比如

一、由于我们监听的快速扫码50ms内，所以只能是扫码枪在输入框扫出数据，不能客户手动输入（因为做了50ms的时间限制，人手输入是不可能在50ms再按enter键，我跟同事同时按键盘都不可以）

二、如果有字母的话，你会发现二维码的字母是大写的，但是记录下的字母是小写，这是因为代码里打印键盘弹起e.key是小写字母，我还没有发现是为什么，但是会有这个问题。

所以发现了这么多问题我就想放弃这种办法了，转念一想，我们为什么要局限于记录下键盘弹起的e.key呢。既然当输入框blur以后，扫码枪本来就可以输入在输入框，那么我们直接记录输入框的数据和监听扫码枪的enter不就行了。思路有了，代码如下：

const keyPress = () => {
    document.onkeyup = (e) => {
        formRef.value.validate(async (valid: boolean) => {
            if (valid) {
                if (e.key === 'Enter') {
                    if (formData.value.barcode) {
                     //自己的代码
                }
            }
        })

    }
}

这样的代码更简单，而且二维码的数据什么扫出来就是什么，不会出现字母大小写改变的问题，而且客户也可以手动输入二维码的数据。