使用jquery检测扫描仪输入

vddsk6oq  于 2023-03-17  发布在  jQuery
关注(0)|答案(5)|浏览(202)

假设我有两个文本框:

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

要填充此文本框,我使用条形码扫描仪和键盘。我想要的是有点困难,我不知道如何做到这一点。我无法区分当用户填充文本框与键盘和条形码时。我需要这个,因为我想实现类似的东西:当用户使用条形码扫描仪时,如果我们没有焦点文本框,我希望焦点条形码文本框并在此文本框中插入此值,当焦点是resourceName文本框时,我希望首先焦点条形码文本框,然后在此文本框中插入此值。我不希望用户使用条形码扫描仪在resourceName文本框中插入条形码。问题是我无法区分事件,用户是如何填充文本框的?使用条形码扫描仪或使用键盘。任何帮助将不胜感激。非常感谢

eqqqjvef

eqqqjvef1#

看一看github jQuery-Scanner-Detection
NPM Package jQuery-Scanner-Detection
jQuery Scanner Detection是一个小插件,用于检测用户何时使用扫描仪(条形码、QR码...)而不是键盘,并调用特定回调。

j8ag8udp

j8ag8udp2#

根据我在评论中提出的想法,我想出了这个...

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位数字(但如果某些字段有焦点等,你可以让它忽略按键)。
它捕捉页面上的所有按键,无论焦点如何,所以它应该捕捉你扫描条形码,即使没有任何东西有焦点。

**编辑:**我按照@DenisBorisov的建议,在键盘缓冲区中添加了.trim(),这样空格就可以忽略。

zqry0prt

zqry0prt3#

看一下jQuery的keypress事件
将它绑定到输入框,当用户使用键盘输入条形码时,它会提醒您
还有,你看过this question吗?

zaqlnxep

zaqlnxep4#

尝试了所有的解决方案,但没有像预期的那样工作。我发现非常简单的解决方案onscaniderjs我有应用程序使用Angular 8。
非常简单,很好的实现。
对于Angular 8,我遵循以下步骤:

  1. npm安装onscan.js --保存
    2.open angular.json,将一个条目添加到脚本数组中,如“节点_模块/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);
      },
    });
  }

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

vmdwslir

vmdwslir5#

基于@Reinstate Monica Cellio的回答,我想出了这个例子,它对我和我的条形码扫描仪都很有效。我不能限制输入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);
    }

相关问题