How to use barcode Scanner in web Application

Question

I would like to use barcode scanner in my Laravel application. This is an online Point of Sale Application. I know that barcode scanner returns just a string and press Enter Button. But to capture this string I need to use a form and select the input field as well. If I dont select the input field it cann't capture the data. What I want is to work the barcode scanner without selecting the form. Is it possible anyway ?

Answer 1

You can capture the keypresses that the barcode reader sends with JavaScript.

Add an event listener to the window or document object to capture any keypresses anywhere in the document. Check the incoming characters for one which signals the end of the barcode (probably a new line).

This is some code I wrote for a similar task using an RFID reader. It depends on jQuery (mostly because the normalisation jQuery does on event.which makes identifying the character pressed convenient) but you can rewrite it to avoid that if you like.

It stores each keypress in an array unless the press is of Enter (which the RFID reader I was using sent after each scan). If it gets an Enter, it takes the scanned code and acts on it (I'm using Socket.IO to send it to the server, you can do whatever you like with it) and then clears the array so that the next scan can start from fresh.

var keybuffer = [];

function press(event) {
  if (event.which === 13) {
    return send();
  }
  var number = event.which - 48;
  if (number < 0 || number > 9) {
    return;
  }
  keybuffer.push(number);
}

$(document).on("keypress", press);

function send() {
  socket.emit('scan', keybuffer.join(""));
  keybuffer.length = 0;
}

Answer 2

Yes, there are two ways:

The autofocus attribute

<input id="barcodeInput" type="text" autofocus>

You can use the autofocus attribute, but this may not be supported by any browser.

Use Javascript

This is a fallback for the autofocus attribute.

window.onload = function() {
    var input = document.getElementById("barcodeInput").focus();
}

This will set the focus as soon as the page is loaded inside the input with the id barcodeInput.

If you are using JQuery you can do it this way:

$(document).ready(function() {
    $('#barcodeInput').focus();
});