HTML INPUT data loss when fast typing

Question

I got a bit of a strange issue I hope anyone can assist with. The case is really simple. I got a pure HTML with JS site that runs on a local windows 10 kiosk machine.

The site have a input field that takes userId as input and then load next site if the userId exist. The function have been tested by entering the userid manually and by scanning a barcode. This is a kiosk, so the user is provided with a member card, that is being read by a MSR reader that emulates a keybord. The reader have been tested in notepad, and output is good.

When a user swipe the card, expected ID could be 100013. The data the input field gets is 1013. That points to the input field fail to get all the digits when its filled to quickly. As a temporary solution, I had to make a window.prompt() box to catch the input, but that is really not a good solution.

Here is the simple code.

HTML:

<input onblur="this.focus()" class="firstField" autofocus type="text" value="" id="userId" onkeydown="log_in(event)"  />

JS function:

function log_in(event){
    if (event.keyCode == 13 || event.which == 13){
        var tmp = document.getElementById("customerId").value;
        document.getElementById("customerId").value = "";
        CheckUser(tmp);
    }
}

Thanks for your suggestion. I have tried all different methods linke oninput, onchange and so on. Still same result. — Håkon Berntsen, Jan 14 '20 at 07:52
Maybe this? https://stackoverflow.com/questions/21633537/javascript-how-to-read-a-hand-held-barcode-scanner-best — mplungjan, Jan 14 '20 at 08:01
Interesting. Does the reader and/or keyboard emulator have options for how fast it generates/transmits the output? Other than that, a possible workaround might be to have your `log_in()` method (which I'd rather call `onInput()` or such) to not immediately process the value from the input field, but trigger a `setTimeout()`, so that another function then checks the input value a short time (1 s, maybe?) later. — domsson, Jan 14 '20 at 08:02
Thanks for suggestions. I have tried to disable all functions and just have an empty input field. Even there, msr input is 1013 where its supposed to be 100013. In Notepad and prompt() field, the data is read correctly. — Håkon Berntsen, Jan 14 '20 at 08:06
I would suggest to try to use `oninput` with a debounced handler — fedeghe, Jan 14 '20 at 10:27

score 0 · Answer 1 · answered Jan 15 '20 at 08:03

Short answer to my question: It cant be done. Why? An MSR reader reads the chars in a batch before parsing it to the browser. Time between chars are in ms, and shorter than onchange can run in the browser, at least in older browsers.

Soltuition: 1. Find a way to create delay between chars read before parsing. Can be done in some utility sw or possible in the driver for some MSR readers. 2. Use a prompt. Thats a window.element and do not rely on onchange update. (js) 3. Use window.external to communicate with the reader if possible.(js)

HTML INPUT data loss when fast typing

1 Answers1