Last Updated: February 25, 2016
·
35.14K
· 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 ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
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