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
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#