如何在Web应用程序中使用条形码扫描仪

Question

我想在Laravel应用程序中使用条形码扫描仪。这是在线销售点应用程序。我知道条形码扫描仪仅返回一个字符串，然后按Enter键。但是要捕获此字符串，我需要使用一个表单并选择输入字段。如果我不选择输入字段，则无法捕获数据。我想要的是不选择表格就使用条形码扫描仪。反正有可能吗？

Answer 1

您可以捕获条码阅读器使用 JavaScript 发送的按键。

将事件侦听器添加到窗口或文档对象以捕获文档中任何位置的任何按键。检查传入的字符是否表示条形码结束（可能是新行）。

这是我使用 RFID 阅读器为类似任务编写的一些代码。它取决于 jQuery（主要是因为 jQuery 的规范化event.which使得识别按下的字符变得方便）但是如果你愿意，你可以重写它以避免这种情况。

它将每个按键存储在一个数组中，除非按键是 Enter（我使用的 RFID 阅读器在每次扫描后发送）。如果它得到一个回车，它接受扫描的代码并对其进行操作（我正在使用 Socket.IO 将它发送到服务器，你可以用它做任何你喜欢的事情）然后清除数组，以便下一次扫描可以从新鲜开始。

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

是的，有两种方法：

该autofocus属性

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

您可以使用该autofocus属性，但是任何浏览器都可能不支持此属性。

使用JavaScript

这是该autofocus属性的备用。

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

一旦将页面加载到具有id的输入中，这将设置焦点barcodeInput。

如果您正在使用JQuery，则可以通过以下方式进行操作：

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