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

Posted 2023-03-14

【中文标题】如何在 Web 应用程序中使用条形码扫描仪

【英文标题】：How to use barcode Scanner in web Application

【发布时间】：2017-07-08 14:43:54

【问题描述】：

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

【问题讨论】：

这不是一个真正的 php 问题，而是更多地与 html 和 javascript 相关。

【参考方案1】：

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

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

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

它将每个按键存储在一个数组中，除非按键是 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;

【讨论】：

很棒的方法，如果您必须区分条形码按键和真实用户按键，另一种想法是查看事件对象的 timeStamp 属性。如果您将事件侦听器添加到整个文档并且发生其他按键操作，则可能有必要。

【参考方案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();
);

【讨论】：

你对 quaggaJS 有什么想法吗？

不，我不知道。