Handle Barcode Sacnner Input in Browser via jQuery

Handle Barcode Sacnner Input in Browser via jQuery

B/S(Browser/Server) architecture applications dominate the enterprise market. It is important to enable other input devices, such as barcode scanner(reader). This tutorial shows how to deal with barcode scanner in browser.

1. How does barcode scanner work ?
When you plug a barcode scanner into a comptuer, it will be recognized as an input device, similar as keyboard. Wherever you can input text via keyboard, so can barcode scanner. It can be understood as that, barcode scanner read text from a barcode tag, then type them one by one for you.

For example, suppose there is a barcode "1234". when you scan it with barcode scanner, it likes you type via keyboard,"1","2","3","4","ENTER". Yes, there will be a "enter" stroke which automatically added by scanner after it finished read the barcode.

2. Capture barcode in Action.
First of all, put a input filed to accept barcode:

input name="barcode" id="barcodeinput" type="text"

Then listen the keypress event, get the barcode value when there is a "enter" key stroke:


$("#barcodeinput").keypress(function(e){
//key code 13 is "enter",
if(e.keyCode==13){
//print out the barcode
alert($("#scaninput").val(););
//clear the input field for next scan
$("#scaninput").val('');
//kill the "enter" event
return false;
}
});


Notice:
Because the "enter" keystroke, IE will submit the form. To stop it, use "return false".



source: http://www.ke-cai.net/2009/06/handle-barcode-sacnner-input-in-browser.html