扫码枪写入案例。关于js原生聚焦以及扫码枪原理

📅 发布时间:2026/7/13 3:30:01 👁️ 浏览次数:
扫码枪写入案例。关于js原生聚焦以及扫码枪原理
扫码枪原理扫码枪的原理是在当前页面聚焦的元素上通过调用键盘按键快速输入信息并且触发回车按钮。因此可以通过监听keydown事件判断是否按下Enter来处理数据。代码示例const handleScan e { const now Date.now(); const key e.key; if (key Enter) { // 如果临时字符不为空说明扫码完成 if (tempCode) { dataForm.value.sku_no tempCode; // 回显结果 console.log(最终输入:, dataForm.value.sku_no); // 此处处理扫码枪扫码后逻辑 tempCode ; // 清空临时存储 } // 清除超时定时器避免重复触发 clearTimeout(scanTimeout); return; } // 2. 过滤⽆效键如 Shift、Ctrl 等功能键 if (key.length 1) { return; } // 3. 通过时间间隔判断是否为扫码枪输⼊扫码速度远快于⼿动输⼊ // ⼿动输⼊间隔通常 300ms扫码枪通常 100ms if (now - lastKeyTime 500) { // 间隔过⻓视为新的扫码开始清空临时字符 tempCode ; } // 4. 存储当前字符 tempCode key; // 更新上⼀次按键时间 lastKeyTime now; // 5. 重置超时定时器如果 300ms 内没有新字符视为扫码中断 clearTimeout(scanTimeout); scanTimeout setTimeout(() { tempCode ; // 超时后清空临时字符 }, 500); }; document.addEventListener(keydown, handleScan);聚焦问题实际场景式在打开一个弹窗上直接通过扫二维码然后调用接口给表格添加一行数据。但是测试发现只有在单击页面之后才能写入成功。监听元素为document无focus()可调用。通过以下示例触发页面焦点:// 2. 设置焦点到可接收键盘输入的元素 const focusInput () { // 尝试找到一个可聚焦元素input或设置tabindex的div const focusableElement document.querySelector(input, [tabindex]); if (focusableElement) { focusableElement.focus(); } else { // 如果没有可聚焦元素创建一个透明的输入框 const hiddenInput document.createElement(input); hiddenInput.style.position fixed; hiddenInput.style.opacity 0; hiddenInput.style.pointerEvents none; document.body.appendChild(hiddenInput); hiddenInput.focus(); // 在失去焦点时移除 hiddenInput.addEventListener(blur, () { document.body.removeChild(hiddenInput); }); } }; setTimeout(focusInput, 100);focus()方法获得焦点的元素主要分为两类原生可聚焦元素表单组件和通过tabindex属性变为可聚焦的元素任何 HTML 元素添加tabindex属性后均可获得焦点document.querySelector([tabindex]);获取到可聚焦且无输入框的元素如果有输入框会被输入事件拦截keydown事件导致keydown监听不到。完成上诉之后即可实现完美扫码枪功能