Javascript catch input when no input has focus

Question

I have bar code scanner.

Sometimes user wants to search items by bar code.

But he is lazy enough and doens't want to use mouse at all to click on input.

Scanner usually inputs from 8 to 13 symbols very fast, no human types so fast.

It would be perfect solution to (1)detect extremely input and if no input element on the page has focus (2) then to select the input with certain class , fill it with content from scanner and start searching.

Second stage is non-issue. I 've no idea how to start with first stage.

Are there any libraries?

Not perfect solution would be to program bar code reader to begin every entering with some key combination and listen for this key and set focus on necessary input. But this would require extra work of other guys.

Is perfect solution reachable?

@epascarello: I think these days scanners just tend to emulate keyboard button presses so you wouldn't know any different from scanner and key press — musefan, May 15 '17 at 14:07
@musefan I was trying to figure out the event so I could tell them to listen for input/keypress/etc on the document.... — epascarello, May 15 '17 at 14:08

score 13 · Accepted Answer · answered May 15 '17 at 14:05

You could respond to keypress on document by filling in that key in the input and giving it focus, if the target of the keypress isn't an input:

document.addEventListener("keypress", function(e) {
  if (e.target.tagName !== "INPUT") {
    var input = document.querySelector(".my-input");
    input.focus();
    input.value = e.key;
    e.preventDefault();
  }
});

<input type="text" class="my-input">

I was intrigued to find that if I didn't prevent the default, setting the focus made Chrome type the character in the input (but not Firefox). Hence the preventDefault to keep Chrome from doing that.

If you need to support obsolete browsers, you may need to do some playing around with keyCode and/or which rather than using key. MDN claims key support in any modern Chrome or Firefox and IE9+ (doesn't say for Edge).

pretty interesting solution and does what I want, I 'll give it a try for a week at first — Tebe, May 16 '17 at 05:19

jfbloom22 · Answer 2 · 2020-01-16T18:34:40.663

The best way to capture an IR Scan without focusing a form input is to listen for the "keypress" and "textInput" events.

document.addEventListener('textInput', function (e){
    console.log('textInput', e.data)
});

It is also easy to prevent the IR scan data from going into a form input. Focus can even be on an input, say a quantity input, and I can still capture the IR UPC code without affecting the quantity.

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.

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);

With that in, trigger an IR scan. You should see console logs for all the events you have to work with. Found this monitoring trick here: How do you log all events fired by an element in jQuery?

In order to support additional types of IR scanners I also include a listener for the 'keypress" event:

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

           /**
           * Checks if at least 6 characters are entered then submit the UPC
           */
          if (newUPC.length >= 6) {
            this.submit();
          } 
       }
    });

At least the last code snippet is not a valid js code. – Alexander Dyachkov Dec 23 '19 at 13:34 — Alexander Dyachkov, Dec 23 '19 at 13:34

Javascript catch input when no input has focus

2 Answers2

Linked