使用jquery检测扫描仪输入

Posted 2021-03-31

假设我有两个文本框：

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

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

答案

看看github jQuery-Scanner-Detection

NPM Package jQuery-Scanner-Detection

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

另一答案

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

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的建议忽略空格。

另一答案

看看jQuery的keypress事件

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

另外，你看过this question吗？