Last Updated: February 25, 2016
·
34.47K
· mimopoweb

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

2 Responses
Add your response

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 ·