72

I'd like to be able to scan barcodes via a hand held scanner and handle the results with Javascript.

A barcode-scanner works almost like a keyboard. It outputs the scanned/translated (barcode->number) data raw (right?). Actually I just need to catch the output and proceed. But how?

Here's some pseudocode I'd like to make work:

$(document).on("scanButtonDown", "document", function(e) {
    // get scanned content
    var scannedProductId = this.getScannedContent();
    
    // get product 
    var product = getProductById(scannedProductId);

    // add productname to list
    $("#product_list").append("<li>" + product.name + "</li>");
});
  • Any ideas (frameworks, plugins, snippets)?
  • Any barcode-scanner (hardware) recommendation?

I found this and this good questions but I'd like to get more information about the handling. Just to focus a textarea may be not enough in my case.

13 Answers 13

62

Your pseudo code won't work, because you don't have access to the scanner to catch events like scanButtonDown. Your only option is a HID scanner, which behaves exactly like a keyboard. To differentiate scanner input from keyboard input you have two options: Timer-based or prefix-based.

Timer-based

The scanner is likely to input characters much quicker than a user can (sensibly) with a keyboard. Calculate how quickly keystrokes are being received and buffer fast input into a variable to pass to your getProductsId function. @Vitall wrote a reusable jQuery solution for catching barcode scanner input, you would just need to catch the onbarcodescanned event.

Prefix-based

Most scanners can be configured to prefix all scanned data. You can use the prefix to start intercepting all input and once you've got your barcode you stop intercepting input.

Full disclosure: I work as a consultant to Socket Mobile, Inc. who make handheld scanners.

6
  • 2
    I know this is an old post, but also wanted to point out that the HID scanner is also likely to use the return character/key at the end of the input.
    – James
    Commented Aug 4, 2015 at 11:13
  • Is there a way to remove the return/enter at the end?
    – yeouuu
    Commented Feb 16, 2016 at 21:51
  • 2
    @yeouuu check your scanner's documentation. There is usually a way to disable it, but it varies from scanner to scanner. Alternatively, since you are catching every key event, you can use preventDefault to "swallow" the return/enter key at the end of each scan
    – Enrico
    Commented Feb 17, 2016 at 2:51
  • I have poured the timer-based solution into a vanilla-js package, works like a charm! npmjs.com/package/@itexperts/barcode-scanner Commented Oct 8, 2021 at 8:01
  • 1
    we also have github.com/axenox/onscan.js
    – buncis
    Commented Jul 31, 2022 at 16:30
26

After a lot of research and testing, what worked the best for me was to capture input from a barcode scanner without focusing a form input. Listen to the keydown and textInput events.

The textInput event acts like a paste event. It has then entire barcode data. In my case I am looking for UPC barcodes. The e.preventDefault() prevents the barcode data from being inserted into a form input:

document.addEventListener('textInput', function (e){
    if(e.data.length >= 6){
        console.log('IR scan textInput', e.data);
        e.preventDefault();
    }
});

I have tested this on Android 4.4 and 7.0 with a CipherLab IR scanner.

Example for listening to the keydown event. In my case I am able to assume that as long as a form input is not focused, the user is scanning a barcode.

    let UPC = '';
    document.addEventListener("keydown", function(e) {
        const textInput = e.key || String.fromCharCode(e.keyCode);
        const targetName = e.target.localName;
        let newUPC = '';
        if (textInput && textInput.length === 1 && targetName !== 'input'){
            newUPC = UPC+textInput;

          if (newUPC.length >= 6) {
            console.log('barcode scanned:  ', newUPC);
          } 
       }
    });

Of course, rather than checking the length of the string to determine a scan, you can listen for the e.keyCode === 13 in the keydown event listener.

Not all IR scanners will trigger the textInput event. If your device does not, then you can check to see if it is emitting something similar with:

monitorEvents(document.body);

Found this monitoring trick here: How do you log all events fired by an element in jQuery?

4
  • 1
    document.addEventListener('textInput'... worked for you? I am only getting that event on inputs when in focus :\ Commented Mar 29, 2018 at 16:40
  • @KevinJantzer are you working on a Cordova iOS app? I just figured out today that iOS does not trigger keyboard events in the web view unless an input is focused. I modified a Cordova iOS plugin to capture the keyboard events and send them to my app: github.com/SimpleJoySolutions/cordova.externalkeyboard
    – jfbloom22
    Commented Apr 4, 2018 at 23:13
  • I'm not; I'm using web app manifest on android devices. I ended up figuring our how to use textInput and released the code here: github.com/kjantzer/backbone-barcode-scanneri You're comment about textInput helped me look in the right direction tho! Commented Apr 5, 2018 at 18:37
  • 2
    glad to hear you got it workin! FYI you have an extra "i" on the end of your link to the project.
    – jfbloom22
    Commented Apr 5, 2018 at 22:07
20

I'm little late but I made this work around based in some answers here.

let code = "";
let reading = false;

document.addEventListener('keypress', e => {
  //usually scanners throw an 'Enter' key at the end of read
   if (e.keyCode === 13) {
          if(code.length > 10) {
            console.log(code);
            /// code ready to use                
            code = "";
         }
    } else {
        code += e.key; //while this is not an 'enter' it stores the every key            
    }

    //run a timeout of 200ms at the first read and clear everything
    if(!reading) {
        reading = true;
        setTimeout(() => {
            code = "";
            reading = false;
        }, 200);  //200 works fine for me but you can adjust it
    }
});
5
  • 3
    This is the solution to go with if you are looking for something. Beware that not all scanners are alike. A 200ms timeout may not be enough for some Bluetooth/cheaper scanners. I suggest allowing clients to adjust this setting to suite their needs.
    – CAlex
    Commented Nov 8, 2019 at 2:45
  • when I scan QRCode with URL on it, returns null.
    – arjunkn
    Commented Oct 14, 2021 at 11:06
  • Consider the fact that some barcode scanner can be configured to add (or not) an enter at the end of a scan. It depends on every brand. My Zebra DS22 doesn't by default. But, once I configured it to return a <ENTER> once scanning is finished, it does work (for both QR or single barcode). Commented Feb 18, 2022 at 15:18
  • Any idea how to handle large QR having 3000/4000 as text ? Commented Jan 18 at 4:54
  • I am facing multiple barcode value concatenation issue once user continue scan the barcode by scanner, please any help me. Commented May 29 at 8:48
7

A barcode-scanner works almost like a keyboard.

It depends on the model. Every one that I've used works exactly like a keyboard (at least as far as the computer is concerned)

It outputs the scanned/translated (barcode->number) data raw (right?).

It outputs keycodes.

$(document).on("scanButtonDown"

You probably want keypress, not scanButtonDown.

Look at the event object to determine the "key" that was pressed.

To determine when the entire code has been scanned, you might get an "end of data" key (possibly a space or a return) or you might have to just count how many characters are being input.

6

Tried all the solutions, but not worked as expected. I found very easiest solution onscan.js I have application using angular 8.

Very simple and good implementation.

For angular 8, I followed steps:

1.npm install onscan.js --save

2.open angular.json, add one entry to script array as "node_modules/onscan.js/onscan.min.js"

3.In component class, implement interface AfterViewInit

declare var onscan:any;
  ngAfterViewInit(): void {

    //Put focus to textbox and press scanner button
    onScan.attachTo(document, {
      suffixKeyCodes: [13], // enter-key expected at the end of a scan
      reactToPaste: true, // Compatibility to built-in scanners in paste-mode (as opposed to keyboard-mode)
      onScan: function (sCode, iQty) { // Alternative to document.addEventListener('scan')
        console.log('Scanned: ' + iQty + 'x ' + sCode);
      },
    });
  }

Best thing is scanned text appears into focued textbox element

Hope this help.

3
  • Good one for angular applications, need to handle few things but works!
    – sandip
    Commented Nov 5, 2021 at 12:34
  • how about the qr code scanner device will it work that? Commented Nov 24, 2021 at 13:47
  • If you have a scanner with multiple "process modes", make sure you select "Keyboard input" for the mode or this library will not work. Commented Apr 12, 2022 at 13:37
5

I wanted to share this topic using React too, as I struggled a lot with it. I think most of the barcode scanners, such as Hanz Herdel said, terminate with ENTER. In my case, I found easier to wrap the input in a form and catch the submission event, prevent default and retrieve the value of the input.
I preferred this type of approach so to handle any type of barcode length, instead to check the length of it.

Here's how I handled it in React:

import { useState } from "react";

export default function Modal() {
const [repairArticles, setRepairArticles] = useState([]);

function handleBarcodeInput(e) {
  e.preventDefault();
  const input = e.target.querySelector("input");
  const value = input.value;
  setRepairArticles((prev) => {
    return (prev = [...prev, value]);
  });
  input.value = "";
}

return (
  <div>
    <form onSubmit={(e) => handleBarcodeInput(e)} >
      <input id="barcode-input" />
      <button type="submit" className="hidden" />
    </form>
    <div className="mt-3">
      {repairArticles.map((el, index) => {
        return <p key={index}>{el}</p>;
      })}
    </div>
  </div>    
 )           
}
4

Here is working fine.
It's working when input has focus and input hasn't focus

on_scanner() // init function

function on_scanner() {
    let is_event = false; // for check just one event declaration
    let input = document.getElementById("scanner");
    input.addEventListener("focus", function () {
        if (!is_event) {
            is_event = true;
            input.addEventListener("keypress", function (e) {
                setTimeout(function () {
                    if (e.keyCode == 13) {
                        scanner(input.value); // use value as you need
                        input.select();
                    }
                }, 500)
            })
        }
    });
    document.addEventListener("keypress", function (e) {
        if (e.target.tagName !== "INPUT") {
            input.focus();
        }
    });
}

function scanner(value) {
    if (value == '') return;
    console.log(value)
}

HTML

<input type="text" id="scanner" placeholder="scanner">
2

This is an extension to the answer given by Hanz Herdel incase you are using one of the PosX scanners or any other scanner that are capable of adding a special symbol to the beginning of the characters. In this case, the tilde (~) symbol:

let barcode = "";
let reading = false;

document.addEventListener("keydown", e => {
	//console.log(e.key);
	
	if (e.key == 'Enter') {
		if (barcode.length == 17) {
			if (barcode.charAt(0) == '~') {
				
				console.log(barcode);
				barcode = "";
			}
		}
	}
	else {
		if (e.key != 'Shift') {
			barcode += e.key;
		}
	}
	
	if (!reading) {
		reading = true;
		setTimeout( () => {
			barcode = "";
			reading = false;
		}, 200);
	}
}, true)

You can change the barcode length and the timeout speed to your liking but this worked perfect for me.

2

Needs hardening but this routine, which counts on scanned data being sent in under 100ms, is working in production. Thanks to @jfbloom22 and other answers for inspiration and reminding me of monitorEvents.

It appears scanners need to be set to send "HID Keyboard"-type data(?) and be set to terminate with "Enter".

Although is purely JavaScript logic, was written in TypeScript app for a PCF (Power Apps Component Framework) project that allows the app to accept scan data without the need to focus on an input box. Globals were used as a convenience.

public Scan(evt: Event): void {
    
    const e:KeyboardEvent = evt as KeyboardEvent;
    const timeDiff = e.timeStamp - CheckInPCF.LastTimeStamp;
    CheckInPCF.LastTimeStamp = e.timeStamp; //"global"

    //console.log(e.key + ': ' + timeDiff);

    if (timeDiff < 100) {

        if (e.key == 'Enter') {

            //Assemble complete scan text
            CheckInPCF.ScanText = CheckInPCF.FirstCharacterCandidate + CheckInPCF.ScanText; //.replace('\u000D','');

            //console.log('finished: ' + CheckInPCF.ScanText);
            
            CheckInPCF._this._notifyOutputChanged(); //Power Apps related
            
        }
        else {
            CheckInPCF.ScanText += e.key;
        }
    }
    else {
        CheckInPCF.ScanText = '';
        CheckInPCF.FirstCharacterCandidate = e.key;
    }
}
2

Vue 2 implementation (i think vuejs's syntax is similar to angular):

BarcodeScanner.vue component code is here:

<template>
  <input type="hidden" name="_barcode" v-model="finalCode" />
</template>

<script>
export default {
  props: {
    onSuccess: {
      type: Function,
      required: true
    },
    minLength: {
      type: Number,
      default: () => 10
    }
  },
  data() {
    return {
      code: "",
      finalCode: "",
      fromScanner: false,
      reading: false
    };
  },
  mounted() {
    document.addEventListener("keypress", this.documentKeyboardListener);
  },
  destroyed() {
    document.removeEventListener("keypress", this.documentKeyboardListener);
  },

  methods: {
    documentKeyboardListener(e) {
      if (e.target.nodeName !== 'BODY') return;
      if (e.code === "Enter") {
        if (this.reading && this.code.length > this.minLength) {
          if (this.onSuccess)
            this.onSuccess(this.code);

          this.finalCode = this.code;
          this.code = "";
          this.fromScanner = true;
        }
      } else {
        this.code += e.key; //while this is not an 'enter' it stores the every key
      }

      //run a timeout of 200ms at the first read and clear everything
      if (!this.reading) {
        this.reading = true;

        setTimeout(() => {
          this.code = "";
          this.reading = false;
          this.fromScanner = false;
        }, 200); //200 works fine for me but you can adjust it
      }
    },
  },
};
</script>

You can invoke the component anywhere:

 ...
 <barcode-scanner onSuccess="yourListener"/>
 ...

(Js scanner code is taken from Hanz Herdel)

1

I've just started working on a plugin that handles barcode scanning and credit card scanning (built on jQuery):

https://github.com/ericuldall/jquery-pos

Simple implementation:

$(function(){
    $(document).pos();
    $(document).on('scan.pos.barcode', function(event){
        var barcode = event.code;
        //handle your code here....
    });
});

So far this plugin is only tested with one type of scanner and codes containing only digits, but if you have further requirements that aren't working with it, I'd be happy to adapt it to your needs. Please check out the github page and give it a whirl. Contributions are encouraged.

E

1

var txt = "";
function selectBarcode() {
    if (txt != $("#focus").val()) {
        setTimeout('use_rfid()', 1000);
        txt = $("#focus").val();
    }
    $("#focus").select();
    setTimeout('selectBarcode()', 1000);
}

$(document).ready(function () {
    setTimeout(selectBarcode(),1000);       
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<input type="text" name="tag" id="focus" placeholder="Use handheld RFID scanner">

1

This code works fine for me, you can try it

    var barcode = '';
    var interval;
    document.addEventListener('keydown', function(evt) {

        if (evt.code === 'F12'){
            evt.preventDefault();
        }
        if (interval){
            clearInterval(interval);
        }
        if (evt.code == 'Enter') {
            if (barcode){
                $('#barcode').val(barcode);
                console.log(barcode);
            }
            barcode = '';
            return;
        }
        if (evt.key != 'Shift'){
            barcode += evt.key;
        }
        interval = setInterval(() => barcode = '', 20);
    });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.