Using barcode scanner with jQuery
Configure your barcode scanner prefix and suffix (Chek the manufacturer's manual)
- Prefix: STX (Start of Text, Hex. 0x02)
- Suffix: ETX (End of Text, Hex. 0x03)
Use the following plugin and example to read the barcode scanner output:
/* ========================================================================
* Barcode Reader: jquery.mmp.barcodereader.js
* https://github.com/mimopo/jquery.mmp.barcodereader
* http://mimopo.es
* ========================================================================
* Copyright 2014 - Miguel Montes Porras - @mimopoweb
* Licensed under WTFPL (http://www.wtfpl.net/)
* ======================================================================== */
(function( $ ) {
$.fn.mmpBarcodeReader = function() {
// Initialize buffer, it will contain the barcode scanner output
$(this).data('mmpBarcodeBuffer', '');
// Listen to barcode scanner output
$(this).keydown(function(e){
switch (e.which) {
// STX Prefix (Start of Text)
case 20:
$(this).trigger('start.mmp.barcodereader');
$(this).data('mmpBarcodeReading', true);
break;
// ETX Suffix (End of Text)
case 18:
$(this).trigger('end.mmp.barcodereader', $(this).data('mmpBarcodeBuffer'));
$(this).data('mmpBarcodeReading', false);
$(this).data('mmpBarcodeBuffer', '');
break;
// Regular char
default:
if ($(this).data('mmpBarcodeReading')){
$(this).trigger('char.mmp.barcodereader', String.fromCharCode(e.which));
$(this).data('mmpBarcodeBuffer', $(this).data('mmpBarcodeBuffer') + String.fromCharCode(e.which));
}
break;
}
});
// Sometimes the STX Prefix triggers alternately the keyup & keydown events. Let's fix it!
$(this).keyup(function(e){
if (e.which == 20){
$(this).trigger('start.mmp.barcodereader');
$(this).data('mmpBarcodeReading', true);
}
});
};
}( jQuery ));
Example:
// Listen to all inputs inside the document element
$(document).ready(function(){
$(this).mmpBarcodeReader();
$(this).bind('start.mmp.barcodereader', function(e){
console.log('start', e);
});
$(this).bind('end.mmp.barcodereader', function(e, st){
console.log('end', e, st);
});
$(this).bind('char.mmp.barcodereader', function(e, ch){
console.log('char', e, ch);
});
});
You have the code at https://github.com/mimopo/jquery.mmp.barcodereader
Written by Miguel Montes Porras
Related protips
2 Responses
Is there any demo available for it?
over 1 year ago
·
Sorry but I got no live demo for this plugin. Anyway, you can include both scripts in a HTML page and test it in your browser.
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Javascript
Authors
Did you know?
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#