Question

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

Answer 1

是的，有两种方法：

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();
});

Answer 2

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

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

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

它将每个按键存储在一个数组中，除非按下是Enter（每次扫描后我使用的RFID阅读器）。如果它获得了Enter，它将获取扫描的代码并对其进行操作（我使用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;
}

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

2 个答案: