JavaScript — Как использовать сканер штрих-кода в веб-приложении
Я хотел бы использовать сканер штрих-кода в моем приложении Laravel. Это онлайн-приложение для продажи. Я знаю, что сканер штрих-кода возвращает только строку и нажмите кнопку ввода. Но для захвата этой строки мне нужно использовать форму и выбрать поле ввода. Если я не выбрал поле ввода, он не может захватить данные. Я хочу работать со сканером штрих-кода без выбора формы. Это возможно в любом случае?
Решение
Да, есть два пути:
autofocus атрибут
<input id="barcodeInput" type="text" autofocus>
Вы можете использовать autofocus атрибут, но это может не поддерживаться любым браузером.
Используйте Javascript
Это запасной вариант для autofocus приписывать.
window.onload = function() {
var input = document.getElementById("barcodeInput").focus();
}
Это установит фокус, как только страница загрузится внутри ввода с идентификатором barcodeInput,
Если вы используете JQuery Вы можете сделать это следующим образом:
$(document).ready(function() {
$('#barcodeInput').focus();
});
Другие решения
Вы можете захватить нажатия клавиш, которые считыватель штрих-кода отправляет с помощью 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;
}
detector