6

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

ObjectOrientedPirate
  • 113
  • 1
  • 7
  • You could try `document.addEventListener`, but your existing code should also work. – Rick Hitchcock Aug 16 '18 at 21:09
  • Check out [this thread](https://stackoverflow.com/questions/21633537/javascript-how-to-read-a-hand-held-barcode-scanner-best) 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 Aug 16 '18 at 21:18
  • @AdamH Thank you for the response. I don't think that [this](https://stackoverflow.com/questions/11290898/detect-when-input-box-filled-by-keyboard-and-when-by-barcode-scanner/15354814#15354814) 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 Aug 16 '18 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 Aug 17 '18 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 Aug 17 '18 at 14:27
  • @ObjectOrientedPirate read this thread again, https://stackoverflow.com/questions/21633537/javascript-how-to-read-a-hand-held-barcode-scanner-best, the top answers are not suggesting you attach to an input. They are all attaching to either window or document and listening for either `textInput` or `keydown` – Adam H Aug 17 '18 at 15:26
  • @AdamH events ["keydown", "keyup", "keypress"] in the document are triggered (even if there is no input box). On a debugging point of view, I see that keys from keyboard trigger the above events no matter what. Sadly the barcode reader only trigger the above event if the user is focused on an input box. I gave a shot to "textInput" event but it's not working either. If I have time, I'll make a code snippet so we can both agree on the playground and test the same things – ObjectOrientedPirate Aug 17 '18 at 15:46

1 Answers1

4

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.

ObjectOrientedPirate
  • 113
  • 1
  • 7