js web端扫码枪对接

2023-08-25 02:20| 来源: 网络整理| 查看: 265

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

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

需求：同一个二维码

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

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

怎么做呢？

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

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

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

html部分

js部分

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) }; }, }, }

【本文地址】

公司简介

联系我们