Javascript: How to Read a Hand Held Barcode Scanner Best

Javascript: How to read a hand held barcode scanner best?

Your pseudo code won't work, because you don't have access to the scanner to catch events like scanButtonDown. Your only option is a HID scanner, which behaves exactly like a keyboard. To differentiate scanner input from keyboard input you have two options: Timer-based or prefix-based.

Timer-based

The scanner is likely to input characters much quicker than a user can (sensibly) with a keyboard. Calculate how quickly keystrokes are being received and buffer fast input into a variable to pass to your getProductsId function. @Vitall wrote a reusable jQuery solution for catching barcode scanner input, you would just need to catch the onbarcodescanned event.

Prefix-based

Most scanners can be configured to prefix all scanned data. You can use the prefix to start intercepting all input and once you've got your barcode you stop intercepting input.

Full disclosure: I work as a consultant to Socket Mobile, Inc. who make handheld scanners.

barcode scanner produces a "keypress" event only when the user is on an input box. What event to listen to when user is not on an input box?

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.

How do I distinguish between a scanner input and keyboard input in Javascript?

It is not necessary to judge from keyboard/barcode scanner.

If you decide the Enter(Carriage Return) key notification as input completion on any device, you can use it as simplest trigger to execute Price Look Up/input value verification.

Most scanners can add suffix code to the scanned barcode data for notification.

The most commonly used is the Enter key, but the Tab key may also be used.

By sending the suffix code by the barcode scanner, the possibility that the scanner notification and the key input are mixed is much lower than the timeout detection.

You can do as follows.

• Using the setting barcode, it is set to inform that keys such as Enter, Tab etc. which are not normally included in the barcode as a suffix.
• Bind an event listener for the corresponding suffix key to the text input field.
• The key code is judged in the event listener, and if it is the suffix key, it assumes that the input of the barcode data is complete, carries out processing such as Price Look Up/input value verification, and moves the input focus to the next field.

For example see this article.

execute function on enter key

In Addition:

Your worries seem to be overwhelmed by situations that do not occur often.

If it really happens to be a problem, you should give up dealing with JavaScript.

Please acquire scanner data with another program by the following method. Please notify it to the application in some way.

If you want to continue keyboard input emulation, it is better to capture data before the browser or application is notified.

SetWindowsHookExW function / LowLevelKeyboardProc callback function

EasyHook / Indieteur/GlobalHooks

hook into linux key event handling / uinput-mapper

The Linux keyboard driver / LKL Linux KeyLogger / kristian/system-hook

system wide keyboard hook on X under linux / Error when trying to build a Global Keyboard Hook in Ubuntu Linux / 10.5.2 Keyboard and Pointer Events

Alternatively, set the scanner to serial port mode and have a dedicated program to receive it.

Serial API

JavaScript/JQuery communicate with SerialPort/COM1

Questions tagged opos / Questions tagged pos-for-.net / Questions tagged javapos

Javascript catch input when no input has focus

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">

$('#my_field').on({
    keypress: function() { typed_into = true; },
    change: function() {
        if (typed_into) {
            alert('type');
            typed_into = false; //reset type listener
        } else {
            alert('not type');
        }
    }
});