jQuery:从键盘听自动扫描仪输入?

时间:2011-01-06 23:59:29

标签: javascript jquery barcode-scanner

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

非常感谢任何指针!谢谢。

3 个答案:

答案 0 :(得分: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 = '';
        }
    });
});

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

答案 1 :(得分: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&amp; f2)。第三个字段用于常规输入(f3)。菲尔兹f1&amp; 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'量化。我通过实验(捣碎键盘或按住键)发现最快的人为输入在击键之间有大约约33ms的延迟。我用来测试的条形码扫描仪通常会产生10ms或更短的延迟。

在字段'bcode'上设置超时,以检测输入何时暂停。此时,评估延迟。如果小于20毫秒,则假定使用了条形码扫描器,并且下一个字段被给予焦点。

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

答案 2 :(得分:-1)

请检查this link,它会检测条形码扫描器,您无需专注于某个输入。