Question

假设我有两个文本框：

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

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

Answer 1

在我的评论中提出的想法，我提出了这个......

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 2

看一下github jQuery-Scanner-Detection

NPM Package jQuery-Scanner-Detection

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

Answer 3

看一下jQuery的keypress事件

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

另外，你见过this question吗？

Answer 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);
      },
    });
  }

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

使用jquery检测扫描仪输入

4 个答案: