使用 jquery 检测扫描仪输入

Question

假设我有两个文本框：

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

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

Answer 1

看看 github jQuery-Scanner-Detection

NPM 包 jQuery-Scanner-Detection

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

Answer 2

脱离我在评论中建议的想法，我想出了这个......

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功能。 这显然是一个黑客，并假设没有人会在页面上的其他地方输入 13 位数字（但如果某些字段有焦点等，您可以让它忽略按键）。

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

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

Answer 3

看看 jQuery 的按键事件

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

另外，你见过这个问题吗？

Answer 4

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

非常简单且实施良好。

对于角度 8，我遵循以下步骤：

1.npm 安装扫描.js --保存

2.打开 angular.json，向脚本数组添加一个条目作为"node_modules/onscan.js/onscan.min.js"

3.In 组件类，实现接口 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);
      },
    });
  }

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

Answer 5

根据莫妮卡·塞利奥@Reinstate的回答，我想出了这个对我和我的条形码扫描仪非常有用的例子。我不能将输入限制为 13 个字符，因为它是一台 2D 扫描仪，还必须扫描包含文本和不同长度的 S/N QR 码。

    var _keybuffer = "";
    var _keybufferTime = 0;
    function detectBarCode(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        var isEnter = code == 13;
        if (_keybufferTime == 0) {
            _keybufferTime = Date.now();
            if (isEnter) {
                return false;
            } else {
                _keybuffer += String.fromCharCode(code).trim();
            }
        } else {
            var currentTime = Date.now();
            var timeBetween = currentTime - _keybufferTime;
            console.log("Time between inputs: " + timeBetween);
            if (timeBetween > 50) {
                // Reset the keybuffer
                _keybuffer = "";
            }
            _keybufferTime = currentTime;
            if (!isEnter) {
                _keybuffer += String.fromCharCode(code).trim();
            } else {
                var bufferCopy = (' ' + _keybuffer).slice(1);
                barcodeEntered(bufferCopy);
                _keybuffer = "";
                _keybufferTime = 0;
            }
        }
        e.preventDefault();
        return true;
    }
    function barcodeEntered(value) {
        alert("You entered a barcode : " + value);
    }