2017-02-19 94 views
1

Я хотел бы использовать сканер штрих-кода в моем приложении Laravel. Это онлайн-приложение для продажи. Я знаю, что сканер штрих-кода возвращает только строку и нажимает кнопку Enter. Но для захвата этой строки мне нужно использовать форму и также выбрать поле ввода. Если я не выбираю поле ввода, он не может захватить данные. Я хочу работать с сканером штрих-кодов без выбора формы. Все равно возможно?Как использовать штрих-код Сканер в веб-приложении

+1

Это не php-вопрос, а больше связанный с html и javascript. – Roman

ответ

2

Да, есть два способа:

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

У вас есть идеи о quaggaJS? –

+0

Нет, я понятия не имею. – Roman

+0

'JQuery' вариант не работает для меня :( –

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