js 获取扫码枪输入数据的方法

1、扫码枪相当于键盘输入设备，输入一连串数字后加一个enter键。但在实际开发中需要区分是扫描枪输入还是键盘用户输入，区别在于扫码枪输入很快。 let code = ''; let lastTime, nextTime; let lastCode, nextCode; [removed] = (e) => { if (window.event) { // IE nextCode = e.keyCode; } else if (e.which) { // Netscape/Firefox/Opera ne 在JavaScript中，获取扫码枪输入数据的关键在于区分扫码枪与普通键盘输入，并且要能够实时地处理连续的字符流。由于扫码枪输入速度通常比手动输入快很多，因此可以通过监听键盘事件来判断输入来源。以下是两种不同的方法来实现这个功能。 ### 方法1：基于`onkeypress`事件监听 我们需要定义一些变量来存储上次按键的代码和时间戳，以及当前正在积累的条形码字符串。在`window.document.onkeypress`事件监听器中，检查事件对象的`keyCode`或`which`属性来获取按键值。如果检测到回车键（`keyCode`或`which`为13），则认为是一次完整的扫码枪输入，并进行相应处理。为了确保不是手动快速输入，可以设置一个阈值，例如如果两次按键间隔小于30毫秒，则认为是连续的扫码枪输入。 ```javascript let code = ''; let lastTime, nextTime; let lastCode, nextCode; window.document.onkeypress = (e) => { if (window.event) { // IE nextCode = e.keyCode; } else if (e.which) { // Netscape/Firefox/Opera nextCode = e.which; } if (nextCode === 13) { if (code.length < 3) return; // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有反应 console.log(code); // 获取到扫码枪输入的内容，做别的操作 code = ''; lastCode = ''; lastTime = ''; return; } nextTime = new Date().getTime(); // ...其他逻辑 }; ``` ### 方法2：基于`onkeydown`事件监听 另一种方法是监听`onkeydown`事件，因为扫码枪扫描每个字符都会触发一次此事件。同样，需要记录上次按键的键码和时间戳。在这种情况下，我们可以利用不同数字键的键码值来构建条形码字符串。当检测到回车键（通常是扫码结束的标志）时，根据条形码长度执行相应的业务逻辑。 ```javascript let nextCode, nextTime = ''; let lastTime = this.lastTime; let code = this.code; window.onload = (e) => { document.onkeydown = (e) => { if (window.event) { // IE nextCode = e.keyCode; } else if (e.which) { // Netscape/Firefox/Opera nextCode = e.which; } nextTime = new Date().getTime(); // ...处理数字键码值 // ...其他逻辑 }; }; ``` 在上述两种方法中，都需要考虑到不同浏览器的兼容性，如IE使用`window.event`，非IE浏览器使用`e.which`来获取按键值。此外，为了确保代码的健壮性，还可以添加异常处理机制，以便在没有扫码枪或键盘输入不正常时，程序仍能正常运行。 在实际应用中，可能会遇到各种类型的条形码，因此在处理条形码长度时，需要根据业务需求进行适当的调整。例如，对于不同长度的条形码，可以添加不同的处理逻辑，如在示例中分别处理长度为13和23的条形码。 通过监听键盘事件并分析输入的速度和模式，我们可以有效地捕获扫码枪输入的数据，并将其用于后续的业务处理。这在电商、物流、仓储等场景中非常常见，能够极大地提高数据录入的效率和准确性。