Javascript：如何最好地阅读手持条码扫描仪？

Question

我希望能够通过手持扫描仪扫描条形码并使用 Javascript 处理结果。

条形码扫描器的工作方式几乎就像键盘一样。它输出扫描/翻译（条形码-> 数字）原始数据（对吗？）。实际上我只需要捕捉输出并继续。但是怎么办？

这是一些我想要工作的伪代码：

 $(document).on("scanButtonDown", "document", function(e) {
    // get scanned content
    var scannedProductId = this.getScannedContent();

    // get product
    var product = getProductById(scannedProductId);

    // add productname to list
    $("#product_list").append("<li>" + product.name + "</li>");
});

• 有什么想法（框架、插件、片段）吗？
• 任何条形码扫描仪（硬件）推荐？

提前致谢！

我发现 了这个 和 这个 很好的问题，但我想获得有关处理的更多信息。就我而言，仅关注文本区域可能还不够。

原文由 Mr. B. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的伪代码将不起作用，因为您无权访问扫描器来捕获诸如 scanButtonDown 之类的事件。您唯一的选择是 HID 扫描仪，它的行为与键盘完全一样。要区分扫描仪输入和键盘输入，您有两个选择：基于计时器或基于前缀。

基于定时器

扫描仪输入字符的速度可能比用户（明智地）使用键盘输入的速度快得多。计算接收击键的速度并将快速输入缓冲到变量中以传递给您的 getProductsId 函数。 @Vitall 编写了一个 可重用的 jQuery 解决方案来捕获条码扫描器输入，您只需要捕获 onbarcodescanned 事件。

基于前缀

大多数扫描仪都可以配置为为所有扫描数据添加前缀。您可以使用前缀开始拦截所有输入，一旦获得条形码，您就停止拦截输入。

_全面披露_：我在制造手持扫描仪的 Socket Mobile, Inc. 担任顾问。

原文由 Enrico 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

经过大量研究和测试，对我来说最有效的方法是在不关注表单输入的情况下从条形码扫描仪捕获输入。收听 keydown 和 textInput 事件。

textInput 事件的行为类似于 paste 事件。然后它具有完整的条形码数据。就我而言，我正在寻找 UPC 条形码。 e.preventDefault() 防止条形码数据被插入到表单输入中：

 document.addEventListener('textInput', function (e){
    if(e.data.length >= 6){
        console.log('IR scan textInput', e.data);
        e.preventDefault();
    }
});

我已经使用 CipherLab IR 扫描仪在 Android 4.4 和 7.0 上对此进行了测试。

监听 keydown 事件的示例。在我的例子中，我可以假设只要表单输入没有聚焦，用户就会扫描条形码。

     let UPC = '';
    document.addEventListener("keydown", function(e) {
        const textInput = e.key || String.fromCharCode(e.keyCode);
        const targetName = e.target.localName;
        let newUPC = '';
        if (textInput && textInput.length === 1 && targetName !== 'input'){
            newUPC = UPC+textInput;

          if (newUPC.length >= 6) {
            console.log('barcode scanned:  ', newUPC);
          }
       }
    });

当然，您可以在 keydown 事件侦听器中侦听 e.keyCode === 13 而不是检查字符串的长度来确定扫描。

并非所有红外扫描仪都会触发 textInput 事件。如果你的设备没有，那么你可以检查它是否发出类似的东西：

 monitorEvents(document.body);

在这里找到了这个监控技巧： How do you log all events fired by an element in jQuery?

原文由 jfbloom22 发布，翻译遵循 CC BY-SA 4.0 许可协议