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

【问题标题】：jQuery: Listening for automated scanner input from keyboard?jQuery：监听来自键盘的自动扫描仪输入？
【发布时间】：2011-01-06 23:59:28
【问题描述】：

我正在为带有条形码扫描仪的图书馆系统编写网络应用程序。扫描仪的输入显示为键盘输入，格式始终为~~[\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 有办法做到这一点吗？

非常感谢任何指针！谢谢你。

【问题讨论】：

标签： javascript jquery barcode-scanner

【解决方案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 = '';
        }
    });
});

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

【讨论】：

【解决方案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 毫秒，则假定已使用条码扫描仪，并为下一个字段提供焦点。

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

【讨论】：