解决扫码枪中文输入法下条形码内容丢失问题

置顶

精

活动

扫码枪的工作原理

扫码枪的基本工作原理是模拟键盘输入。它将扫描到的条码或二维码解析后的数据，以极快的速度输入到当前获得焦点的输入框中，并在数据末尾追加一个回车（Enter）键。这种方法在英文输入法模式下运行良好，但在中文输入模式下可能会出现一些问题，比如录入不完整、小写字母被转换为中文字符等。

问题背景

在实际应用中，特别是在中文环境下，用户和客户反馈了上述问题。为了改善用户体验，在领导与客户的强大动力支持下，我们开始探索解决方案。

解决方案

经过一系列的测试和优化，最终摸索出以下基于[onscan.js](https://www.npmjs.com/package/onscan.js)库的解决方案：

1. 正确录入：确保在中文模式下也能正确录入数字、大小写字母以及英文特殊字符。
2. 内容清空：扫码后自动清空原有的输入内容，展示新的条码内容。
3. 多种输入方式：支持扫码输入和手动输入两种方式。

跳板机会

技术大厂→跳板，前端-测试-后端，待遇和稳定性都还不错，感兴趣可以试试~

实现代码

选用原因

1. 避免自动填充：使用input[type=password]时会有自动填充下拉框和记住密码弹窗，影响用户体验。
2. 兼容性问题：在中文模式下，onscan.js无法触发onScan回调函数。
3. 事件监听：在中文模式下监听input标签的keyPress事件时，无法正确监听小写字母录入。

遗留问题

输入法切换：中途切换输入法（例如点击Caps Lock键），可能导致扫码枪切换为大写模式，从而影响录入结果。

通过上述解决方案，我们能够在中文环境下有效解决扫码枪的录入问题，提升用户的使用体验。

——转载自：aol121