前端 获取 扫码枪等扫码设备输入内容:2种方式

方式一:

只有有输入焦点,扫码枪就可以把结果打印出来。其实就是相当于我们的键盘输入扫码枪会在打印完成后执行回车键。这样当页面不需要输入框没有焦点可以输入时,可以通过监听键盘事件来获取到扫码枪输入的内容。

方式二:

扫码枪连续输入间隔是很小的,可以根据监听时间计算间隔时间,多扫几次以观察实际间隔毫秒为准。就可以判断输入间隔大于设定输入间隔的视为不是扫码枪输入的内容。我测试的联迪扫码盒子输入间隔在20毫秒以内,代码上我设定的有效间隔是80。

//监听扫码枪
            eventListenerScanCode() {
                let barCode = '';
                let lastTime = 0;

                function ClearBarCode() {
                    barCode = '';
                    lastTime = 0;
                }

                window.addEventListener('keypress', function (e) {
                    console.log("监听开始");
                    e = e || window.event;
                    let currCode = e.keyCode || e.which || e.charCode;
                    let currTime = new Date().getTime();
                    if (lastTime > 0) {
                        if (currTime - lastTime <= 80) {// 扫码枪有效输入间隔毫秒
                            barCode += String.fromCharCode(currCode);
                        } else if (currTime - lastTime > 80) {// 输入间隔大于80毫秒,认为不是扫码枪输入内容,清空
                            ClearBarCode();
                        }
                    } else {
                        // 第一次按键
                        barCode = String.fromCharCode(currCode);
                    }
                    lastTime = currTime;

                    if (currCode == 13) {// 回车
                        if (barCode && barCode.length >= 16) { //这里是根据我们二维码或条码的规则校验,增加准确度
                            // 扫码结果,做下一步业务处理
                            console.log("扫码结果:" + barCode + ',长度:' + barCode.length);
                        }
                        // 回车输入后清空
                        ClearBarCode();
                    }
                });
            }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值