6

I'm writing a web app for a library system with a barcode scanner attached. The scanner's input presents as keyboard input, and it's always of the form ~~[\d]+.[\d]+~~, for example ~~470.002~~.

I want to set up a jQuery listener for scanner input, and am a jQuery novice. It should listen to all keyboard input, but only perform an action when it hears input from the scanner, and only when the scanner input has finished.

This is as far as I've got (i.e. not very):

//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();
        }
    });
});

What's the best way to keep listening input in the format I need? I'd like it to listen for the final two tildes before calling check_out_book().

I'd also like it to 'stop' listening after the first tilde if there is a pause - to distinguish between a human typist and the automated scanner input. Does jQuery have a way to do this?

Any pointers very much appreciated! Thank you.

4

2 回答 2

8

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

$(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 = '';
        }
    });
});

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

于 2011-01-07T00:24:58.370 回答
4

我刚刚写完一段 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 毫秒，则假定已使用条形码扫描仪，并为下一个字段提供焦点。

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

于 2013-04-12T19:50:11.320 回答