웹에서 바코드 스캐너를 사용하는 방법 응용 프로그램

Question

Laravel 응용 프로그램에서 바코드 스캐너를 사용하고 싶습니다. 온라인 판매 시점 신청서입니다. 나는 바코드 스캐너가 단지 문자열을 반환하고 Enter 버튼을 누르는 것을 안다. 하지만이 문자열을 캡처하려면 양식을 사용하고 입력 필드도 선택해야합니다. 입력 필드를 선택하지 않으면 데이터를 캡처 할 수 없습니다. 내가 원하는 것은 양식을 선택하지 않고 바코드 스캐너를 사용하는 것입니다. 그것은 어쨌든 가능합니까?

autofocus 속성

<input id="barcodeInput" type="text" autofocus> 

당신은 autofocus 속성을 사용할 수 있지만,이 모든 브라우저에서 지원되지 않을 수 있습니다

Answer 1

예, 두 가지 방법이 있습니다.

를 사용하여 자바 스크립트

이것은 autofocus 속성의 대체입니다.

window.onload = function() { 
    var input = document.getElementById("barcodeInput").focus(); 
} 

이

빨리 페이지가 ID를 barcodeInput으로 입력 내부로드로 포커스를 설정합니다.

당신이 JQuery를 사용하는 경우는이 방법을 수행 할 수 있습니다

$(document).ready(function() { 
    $('#barcodeInput').focus(); 
}); 

Answer 2

당신은 바코드 판독기가 자바 스크립트로 전송하는 키 누름을 캡처 할 수 있습니다.

이벤트 리스너를 윈도우 또는 문서 객체에 추가하여 문서의 아무 곳에서나 키 누르기를 캡처합니다. 들어오는 문자가 바코드의 끝을 알리는 문자인지 확인하십시오 (아마도 새로운 행).

이것은 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; 
}