JQuery: Listening to the input of an automatic scanner from the keyboard?

Question

I am writing a web application for a library system with a built-in barcode scanner. The scanner input is keyboard input and always takes the form ~~[\d]+.[\d]+~~ , for example ~~470.002~~ .

I want to configure the jQuery listener to enter the scanner and am starting to start jQuery. He should listen to all keyboard input, but only perform an action when he hears input from the scanner, and only after completion of the scanner input.

This is all I have (i.e. not really):

 //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 is the best way to save the input signal in the right format? I would like him to listen to the last two tildes before calling check_out_book() .

I would also like to “stop” listening after the first tilde, if there is a pause, to distinguish between machine-to-machine and automatic scanner input. Does jQuery have a way to do this?

Any pointers are much appreciated! Thanks.

Answer 1

I think you want to do this by keeping what you have received so far and checking if it is valid. If this is not the case, discard what you got 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 can combine all of these regular expressions into two, but I think it is more legible.

Answer 2

I just finished writing a bit of javascript that determines if a barcode scanner was used to populate the input field and moves focus to the next field if it was.

My code answers part of your question: “I want to configure the jQuery listener to enter the scanner and start starting with jQuery. It should listen to all the keyboard input, but only perform the action when it hears the input from the scanner, and only after the scanner is finished entering. "

Here is the HTML for the input fields:

 <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 the "bcode" class, designed to write a barcode scanner (f1 and f2). The third field is for regular input (f3). Fields f1 and f2 send (1) the current timestamp when a key is pressed on the typeSpeed ​​function and (2) the identifier of the next field to select when the field receives focus. These fields also call the "typeSpeedReset" function when the field loses focus.

Here is the javascript / jQuery that makes it work:

 $(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 typeSpeed ​​function. I found that the experiment (crushing the keyboard or pressing a key) that the fastest human input has approximately ~ 33 ms delay between keystrokes. The barcode scanner I used for testing with typically produced delays of 10 ms or less.

A timeout is set in the field with the "bcode" class to detect when the input is stopped momentarily. At this point, a delay estimate is performed. If it is less than 20 ms, it is assumed that a barcode scanner is being used, and the next field is focused.

A project written for this code goes even further by changing the background color of the field and displaying a small barcode to the right of the field when it has focus, so users have a clear indication that it is responding to the barcode scanner.

Answer 3

Please check this link , it will detect a barcode scanner, you do not need to focus on a specific input.