js 怎么能区别扫码枪输入和键盘输入呢

Question

问题如标题

我们现在用angular +nz-zorro 7.0
有需求希望扫码枪输入自动搜索
键盘输入手动点击搜索

应该怎么区分呢

Answer 1

原理是判断数据速度，扫描枪输入速度非常快，几毫秒十几毫秒就完成输入，人工输入就很慢。

angular的话，可以用@HostListener来监听键盘事件，记录每个按键时间，然后判断速度。

很多扫描枪会在输入的末尾添加一个回车，也可以用这个作判断。

Answer 2

在厂家没有一些标识或者接口的前提下，我们自己通过什么方法判断都不太严禁。
能想到的是在触发focus事件同时监听键盘事件，如果触发有效区域的键盘事件(比如码扫完之后只有数字，那就只监听48~57,这个根据自己需求来定)那就是手动输入。

Answer 3

扫描枪作为光学、机械、电子、软件应用等技术紧密结合的高科技产品，是继键盘和鼠标之后的第三代主要的电脑输入设备——扫描枪 - 百度百科

首先，感谢 scherman 的回答提供的思路

如果不需要在调用后端接口的时候，传递参数区分是「扫描枪输入」还是「人工键盘输入」：

通过在 input 输入框上绑定原生的键盘监听事件（监听 Enter 回车键的事件触发），然后使用扫描枪扫描，来判断当前扫描枪是否会在扫描之后，“按下”回车键：

• 会触发输入框回车键的监听事件：
  在事件触发的函数中（在 Vue.js 中可能需要阻止父级 Form 表单元素原生的 submit 事件的默认行为；Angular 中如果回车之后不会刷新页面，可能不需要处理），调用搜索接口，实现扫描后自动搜索
• 不会触发输入框回车键的监听事件

如果需要精确区分「扫描枪输入」和「人工键盘输入」，或者扫描枪扫描后不会触发输入框回车键的监听事件：

关键是通过监听输入框原生的 input 输入事件，根据每次触发 input 事件的时间间隔的大小来区分，因为「扫描枪扫描后输入」的间隔通常稳定在 5～20 ms，而「人工键盘输入」通常都在 50 ms 以上，并且时间间隔可能会在较大范围内波动（忽快忽慢）。

借助时间间隔、波动范围、是否会触发回车事件等特点，再结合扫描枪品牌、扫描的内容、人工对于键盘的熟练程度、人工键盘可能会输入的内容等实际业务情况和场景，来决定如何划定人机的分界线：时间间隔 50ms 还是 100ms；波动范围、超出波动范围的次数等因素