js web端扫码枪对接

假设 二维码地址为：https://www.xxx.com?id=SYM123456789

如下是扫码枪扫码后的效果：

需求：同一个二维码

1.通过微信扫码后进入H5页面；

2.web端使用扫码枪扫码后 我们只需要后12位（SYM123456789），并且这12位也可以通过手动输入；

怎么做呢？

第二个问题，如果不做任何处理的话，输入框聚焦后通过扫码枪扫码后的数据肯定是 

和我们的预期效果不一致 我只需要后12位 SYM123456789

这里是我自己想到的一种解决方案>>>

html部分

<!-- 注：因为扫码枪扫码时 如果是中文的输入环境会有输入法的影响 所以在扫码枪环境下 将type切换到password可以屏蔽输入法 -->

<el-input  :value="sourceCode" @input="inputCode" :type="isScan?'password':'text'" placeholder="溯源码" />

js部分

<script>

export default {
    data() {
        return {
            isScan: false,//是否为扫码枪录入
            sourceCode: ''
        }
    },
    created() {
        this.scanCode()
    },
    methods: {
        openCodeListDialog(row) {
            this.$refs.codeList.open(row)
        },
        /* 监听输入 判断通过isScan判断 */
        inputCode(v) {
            if (this.isScan) return;
            this.code = v
        },
        //处理扫码枪获取的数据
        dealScan(code) {
            this.isScan = false
            this.sourceCode = code.substring(code.length - 12);//取出后12位 
        },
        scanCode() {
            let lastTime = null;
            let nextTime = null;
            let code = '';
            let timer = ''
            //监听数据录入 通过判断输入数据的速度来判读是手动输入还是扫码枪录入,
            //这里有一个问题 当用户同时按下两个按键或者故意以高速录入数据时也会被判定为扫码枪输入
            document.onkeydown = 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)
            };

        },
    },
}

</script>