Context:

I'm working on a web application that uses a barcode scanner device. Users scan barcodes, I redirect them to the appropriated page.

Problem:

The scan device I'm using triggers "keypress" events ONLY when the user is in a input box element

window.addEventListener("keypress", function (event) {
    // do something with the event
}

I would like to be able to scan barcodes from ANYWHERE in my application (even when I'm not in an input box). (Yes I know that the code above will fire for every character, I have a timer based algorithm to know if it's a barcode reader or a person typing.).

So far :

I looked at this, so I tried to replace the accepted solution's selector with a more general selector (window or document) without luck. Is there other events more appropriated for this task? I'm open to suggestions on doing it another way.

--EDIT-- :

After more research I came across this. The problem is that my view might not have any input. Just plain text

Thank you

Context:

I'm working on a web application that uses a barcode scanner device. Users scan barcodes, I redirect them to the appropriated page.

Problem:

The scan device I'm using triggers "keypress" events ONLY when the user is in a input box element

window.addEventListener("keypress", function (event) {
    // do something with the event
}

I would like to be able to scan barcodes from ANYWHERE in my application (even when I'm not in an input box). (Yes I know that the code above will fire for every character, I have a timer based algorithm to know if it's a barcode reader or a person typing.).

So far :

I looked at this, so I tried to replace the accepted solution's selector with a more general selector (window or document) without luck. Is there other events more appropriated for this task? I'm open to suggestions on doing it another way.

--EDIT-- :

After more research I came across this. The problem is that my view might not have any input. Just plain text

Thank you

• javascript
• jquery
• web-applications
• barcode
• dom-events

• You could try document.addEventListener, but your existing code should also work. – Rick Hitchcock Commented Aug 16, 2018 at 21:09
• Check out this thread and see if it can offer you any assistance. It looks like you need to listen for a couple of events keydown and textInput – Adam H Commented Aug 16, 2018 at 21:18
• @AdamH Thank you for the response. I don't think that this answer will work as $(document).on({keyup: ... is not picking up the scanner's output. I put break points on that part and it's picking up the keyboard fine but not the scanner (when you are not in a input box). – ObjectOrientedPirate Commented Aug 16, 2018 at 22:47
• What about the possible solutions in the question I linked? sounds like they were having the exact same issue that you were. There are a few possible solutions in that thread. – Adam H Commented Aug 17, 2018 at 14:12
• @AdamH I went through the thread. Almost all possible solutions. But they are all assuming that there is a input box in the view. They are basically focusing the input and then reading the keypress event. But my view might not have input boxes and I wrote in my edit. I think it is currently impossible (from a javascript point of view) to get the input from a barcode scanner device if there is no input in your page you can focus to. – ObjectOrientedPirate Commented Aug 17, 2018 at 14:27

1 Answer 1

Here is for people that may want to know the answer:

For some reason, the following code works with all the scanner I've tested:

document.body.addEventListener("keydown", function(e) {
    // your handler here
}, true)

Note that the boolean true can also be false. Why it didn't work for "window.addEventListener" nor for "document.addEventListener"? I don't know.