扫码枪写入案例。关于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监听不到。完成上诉之后即可实现完美扫码枪功能