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

jQuery: Listening for automated scanner input from keyboard?

提问by AP257

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~~.

我正在为带有条形码扫描仪的图书馆系统编写 Web 应用程序。扫描仪的输入显示为键盘输入，并且始终采用 形式~~[\d]+.[\d]+~~，例如~~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.

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

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().

以我需要的格式保持收听输入的最佳方法是什么？我希望它在调用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?

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

Any pointers very much appreciated! Thank you.

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

回答by lonesomeday

I think you want to do this by storing what you've received so far and checking to see if it's valid. If it is not, discard what you have received and start again:

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

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

You could combine all those regexps into two, but I think it's more legible this way.

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

回答by humbolight

I just finished writing a bit of javascript that detects whether a barcode scanner was used to fill in an input field and moves focus to the next field if it was.

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

My code answers part of your question, "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."

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

Here is the HTML for the input fields:

这是输入字段的 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" />

I have two fields with class 'bcode' that are intended for barcode scanner entry (f1 & f2). The third field is intended for regular input (f3). Fields f1 & f2 send (1) the current timestamp when a key is pressed to the function 'typeSpeed' and (2) the id of the next field to select when the field gains focus. These fields also trigger a call to function 'typeSpeedReset' when the field loses focus.

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

Here is the javascript/jQuery that makes it work:

这是使其工作的 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(); }
}

What happens is the time between keystrokes is quantified by the function 'typeSpeed'. I found out through experimentation (mashing the keyboard or holding down a key) that the fastest human input has approximately ~33ms of delay between keystrokes. The barcode scanner I used to test with generally produced delays of 10ms or less.

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

A timeout is set on the field with class 'bcode' to detect when input has stopped momentarily. At this point, the delay is evaluated. If it is less than 20ms, a barcode scanner is assumed to have been used and the next field is given focus.

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

The project this code was written for goes a step further by changing the background color of the field and displaying a small barcode graphic to the right of the field when it has focus so users have a clear indication that it's responsive to and intended for barcode scanner input.

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

回答by Ahmed Sobhy

Please check this link, it will detect barcode scanner, you don't have to be focused to a certain input.

请检查此链接，它会检测条形码扫描仪，您不必专注于某个输入。