I am building an Angular/Ionic app that receives input from a handheld scanner. Rather than the typical one character at a time keyboard wedge method and listening for individual keydown events to construct barcode data, the scanner I'm working with offers the ability to receive all barcode data at once, similar to a copy/paste. This is extremely preferable for me because it is MUCH faster for lengthy barcodes.
The problem is, this only happens if a text input has focus. When an input has focus, a TextEvent
of type textInput
is raised (see docs here) and the data is copied into the input. This wouldn't be an issue if I could listen for some event to set focus on the input, but no events even get raised unless it already has focus. For reasons I won't go into, let's assume I cannot rely on any sort of autofocus or manually setting focus on page load.
I could of course require users to tap an input field before they scan, but that would be very bad UX.
I have used the monitorEvents(window)
method in Chrome developer tools and confirmed that no events are getting raised unless an input has focus.
What I'm looking for is some way to kind of eat up any and all text input that would be flowing into the application. My gut tells me that it HAS to be coming from somewhere, otherwise how would the app/browser know to put it in the focused input element in the first place?