[removed] How to read a hand held barcode scanner best?

Question

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

Answer 1

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?