使用 jquery 检测扫描仪输入答案

【问题标题】：Detect scanner input using jquery使用 jquery 检测扫描仪输入
【发布时间】：2013-11-26 08:04:19
【问题描述】：

假设我有两个文本框：

<input type="text"id="resourceName" placeholder="Resource name"/>
<input type="text" id="barCode"  placeholder="barCode(EAN-13)"/>

要填充此文本框，我使用 条形码 扫描仪和键盘。我想要的有点困难，我不知道该怎么做。我无法区分用户何时使用键盘填充文本框和何时使用条形码。我需要这个因为我想实现类似的东西：当用户使用条形码扫描仪并且如果我们没有聚焦的文本框，我想聚焦条形码文本框并将这个值插入这个文本框，当焦点是资源名称文本框时，首先我想要关注 barCode 文本框，然后将此值插入此文本框。我不想让用户使用条形码扫描仪在 resourceName 文本框中插入条形码。问题是我无法区分事件，用户如何填充 textboxex？，使用条形码扫描仪或使用键盘。任何帮助将不胜感激。非常感谢

【问题讨论】：

也许在某处有一个“开始扫描”按钮，当点击正确的输入框时，他们知道程序已准备好接收输入。
您可以捕获文档的所有按键，如果它们与条形码格式匹配，您可以将它们推送到正确的字段中。只需检查最后 13 次按键是否都是数字，如果是，则假设它是条形码。它并不完美，但我认为这是你能得到的最好的。
非常感谢，听起来不错...

标签： jquery asp.net-mvc-3 barcode onkeydown

【解决方案1】：

去github看看jQuery-Scanner-Detection

NPM Package jQuery-Scanner-Detection

jQuery Scanner Detection 是一个小插件，用于检测用户何时使用扫描仪（条形码、二维码...）而不是键盘，并调用特定的回调。

【讨论】：

【解决方案2】：

放弃了我在 cmets 中提出的想法，我想出了这个......

var _keybuffer = "";

$(document).on("keyup", function(e) {
    var code = e.keyCode || e.which;
    _keybuffer += String.fromCharCode(code).trim();
    // trim to last 13 characters
    _keybuffer = _keybuffer.substr(-13);

    if (_keybuffer.length == 13) {
        if (!isNaN(parseInt(_keybuffer))) {
            barcodeEntered(_keybuffer);
            _keybuffer = "";
        }
    }
});

function barcodeEntered(value) {
    alert("You entered a barcode : " + value);
}

它保留最后 13 个按键的缓冲区，如果它只是数字，则假定它是条形码并触发 barcodeEntered 函数。这显然是一个 hack，并假设没有理由有人会在页面的其他地方输入 13 位数的数字（但如果某些字段有焦点等，你可以让它忽略按键。）

它捕获页面上的所有按键，无论焦点如何，因此即使没有焦点，它也应该捕获您扫描条形码。

编辑：根据@DenisBorisov 的建议，我已将.trim() 添加到键盘缓冲中，以便忽略空格。

【讨论】：

非常感谢，我会试试这个。
很好，但它会触发两次？
@Erdogan 听起来您已经分配了两次处理程序。
您还需要添加行“_keybuffer = _keybuffer.trim();”在“_keybuffer += String.fromCharCode(code);”之后。这对于忽略扫描仪可以发送的空格和 \n 符号是必要的。
@DenisBorisov 好电话 - 我已将其添加到代码中。

【解决方案3】：

看看jQuery的keypress事件

将此绑定到您的输入框，当用户使用键盘输入条形码时它会提醒您

另外，你见过this question吗？

【讨论】：

我做到了，但没什么好...这还不足以产生影响...这是他们有相同的按键事件的主要问题。
@nicuJanga 你见过这个问题吗：stackoverflow.com/questions/4621299/…

【解决方案4】：

尝试了所有解决方案，但没有按预期工作。我找到了非常简单的解决方案 onscan.js 我有使用 angular 8 的应用程序。

非常简单且很好的实现。

对于 angular 8，我按照以下步骤操作：

1.npm install onscan.js --save

2.打开angular.json，在脚本数组中添加一个条目为“node_modules/onscan.js/onscan.min.js”

3.在组件类中，实现接口AfterViewInit

declare var onscan:any;
  ngAfterViewInit(): void {
    //Put focus to textbox and press scanner button
    onScan.attachTo(document, {
      suffixKeyCodes: [13], // enter-key expected at the end of a scan
      reactToPaste: true, // Compatibility to built-in scanners in paste-mode (as opposed to keyboard-mode)
      onScan: function (sCode, iQty) { // Alternative to document.addEventListener('scan')
        console.log('Scanned: ' + iQty + 'x ' + sCode);
      },
    });
  }

最好的办法是扫描文本出现在焦点文本框元素中

【讨论】：