laravel 如何在 Web 应用程序中使用条码扫描仪
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42325613/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use barcode Scanner in web Application
提问by Mehedi Jaman
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 ?
我想在我的 Laravel 应用程序中使用条形码扫描仪。这是一个在线销售点应用程序。我知道条码扫描器只返回一个字符串，然后按 Enter 按钮。但是为了捕获这个字符串，我需要使用一个表单并选择输入字段。如果我不选择输入字段，它就无法捕获数据。我想要的是在不选择表格的情况下使用条形码扫描仪。有可能吗？
回答by Roman
Yes, there are two ways:
是的，有两种方法：
The autofocusattribute
该autofocus属性
<input id="barcodeInput" type="text" autofocus>
You can use the autofocusattribute, but this may not be supported by any browser.
您可以使用该autofocus属性，但这可能不受任何浏览器的支持。
Use Javascript
使用 JavaScript
This is a fallback for the autofocusattribute.
这是autofocus属性的回退。
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.
一旦页面加载到带有 id 的输入中，这将设置焦点barcodeInput。
If you are using JQueryyou can do it this way:
如果您正在使用，JQuery您可以这样做：
$(document).ready(function() {
$('#barcodeInput').focus();
});
回答by Quentin
You can capture the keypresses that the barcode reader sends with JavaScript.
您可以捕获条码阅读器使用 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.whichmakes identifying the character pressed convenient) but you can rewrite it to avoid that if you like.
这是我使用 RFID 阅读器为类似任务编写的一些代码。它取决于 jQuery（主要是因为 jQuery 的规范化event.which使得识别按下的字符变得方便）但是如果你愿意，你可以重写它以避免这种情况。
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.
它将每个按键存储在一个数组中，除非按键是 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;
}
