jQuery：监听来自键盘的自动扫描仪输入？

Question

我正在为附有条形码扫描仪的图书馆系统编写一个网络应用程序。扫描仪的输入显示为键盘输入，并且始终采用 ~~[\d]+.[\d]+~~ 形式，例如 ~~470.002~~ >。

我想为扫描仪输入设置一个 jQuery 监听器，并且我是 jQuery 新手。它应该监听所有键盘输入，但仅在听到来自扫描仪的输入时并且仅在扫描仪输入完成时才执行操作。

据我所知（即不是很）：

//Global functions: call on all pages.
$(document).ready(function() {
    // Listen for scanner input. 
    $(window).keypress(function(e) {
        var key = e.which;
        if (key==126) {.
            alert('tilde');
            // How to listen for the correct input?
            // check_out_book();
        }
    });
});

以我需要的格式继续收听输入的最佳方法是什么？我希望它在调用 check_out_book() 之前侦听最后两个波浪号。

如果有暂停，我还希望它在第一个波形符之后“停止”收听 - 以区分人类打字员和自动扫描仪输入。 jQuery 有办法做到这一点吗？

非常感谢任何指点！谢谢。

Answer 1

我认为您希望通过存储到目前为止收到的内容并检查其是否有效来做到这一点。如果不是，请丢弃您收到的内容并重新开始：

$(document).ready(function(){
    var input = '',
        r1 = /^~{1,2}$/,
        r2 = /^~{2}\d+$/,
        r3 = /^~{2}\d+\.$/,
        r4 = /^~{2}\d+\.\d+$/,
        r5 = /^~{2}\d+\.\d+~{1}$/
        r6 = /^~{2}\d+\.\d+~{2}$/;

    $(window).keypress(function(e) {
        input += String.fromCharCode(e.which);

        if (r1.test(input) || r2.test(input) || r3.test(input) || r4.test(input) || r5.test(input)) {
            // input is valid so far, continue
        } else if (r6.test(input) {
            // input is valid and complete
            check_out_book();
        } else {
            // input is invalid, start over
            input = '';
        }
    });
});

您可以将所有这些正则表达式合并为两个，但我认为这种方式更清晰。

Answer 2

我刚刚写完一段 JavaScript，用于检测是否使用条形码扫描仪来填写输入字段，如果是，则将焦点移动到下一个字段。

我的代码回答了您的部分问题，“我想为扫描仪输入设置一个 jQuery 侦听器，并且我是 jQuery 新手。它应该侦听所有键盘输入，但仅在听到来自扫描仪的输入时才执行操作，并且仅在当扫描仪输入完成时。”

以下是输入字段的 HTML：

<input type="text" class="bcode" id="f1" onkeydown="typeSpeed(new Date().getTime());" onblur="typeSpeedReset();" onfocus="typeNextField('f2');" />
<input type="text" class="bcode" id="f2" onkeydown="typeSpeed(new Date().getTime());" onblur="typeSpeedReset();" onfocus="typeNextField('f3');" />
<input type="text" id="f3" />

我有两个带有“bcode”类的字段，用于条形码扫描仪输入（f1 和 f2）。第三个字段用于常规输入 (f3)。字段 f1 和f2 将 (1) 按下某个键时的当前时间戳发送给函数“typeSpeed”，以及 (2) 当字段获得焦点时要选择的下一个字段的 id。当字段失去焦点时，这些字段还会触发对函数“typeSpeedReset”的调用。

下面是使其工作的 javascript/jQuery：

$(function(){   
    var typingTimeout;
    $('.bcode').keypress(function(e){
        if (typingTimeout != undefined) clearTimeout(typingTimeout);
        typingTimeout = setTimeout(isBarcode, 500); 
    }); 
});

var ts0 = 0, ts1 = 0, ts2, nf;

function typeSpeed(time) {
    ts0 = (ts0 == 0) ? time : 0;
    var ts3 = ts1;  
    ts1 = time - ts0;   
    ts2 = ts1 - ts3;    
}

function typeSpeedReset() { ts0 = 0; ts1 = 0; }

function typeNextField(nextfield) { nf = nextfield; }

function isBarcode() {
    if(ts2 < 20 && ts1 != 0) { $('#'+nf).focus(); }
}

发生的情况是按键之间的时间由函数“typeSpeed”进行量化。我通过实验（敲击键盘或按住某个键）发现，最快的人类输入在击键之间有大约 33 毫秒的延迟。我用来测试的条码扫描仪通常会产生 10 毫秒或更短的延迟。

在具有“bcode”类的字段上设置超时，以检测输入何时暂时停止。此时，评估延迟。如果小于 20 毫秒，则假定已使用条形码扫描仪，并给予下一个字段焦点。

编写此代码的项目更进一步，更改字段的背景颜色，并在获得焦点时在字段右侧显示一个小的条形码图形，以便用户清楚地表明它响应并适用于条形码扫描仪输入。