ウェブでバーコードスキャナを使用する方法

Question

私のLaravelアプリケーションでバーコードスキャナを使用したいと思います。これはオンライン販売時点管理アプリケーションです。私は、バーコードスキャナが文字列を返し、Enterボタンを押すことを知っています。しかし、この文字列を取得するには、フォームを使用して入力フィールドを選択する必要があります。入力フィールドを選択しないと、データをキャプチャできません。私が望むのは、フォームを選択せず​​にバーコードスキャナを操作することです。それはとにかく可能ですか？あなたはautofocus属性を使用することができますが、これは任意のブラウザでサポートされない場合があり

autofocus属性

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

：

Answer 1

はい、2つの方法があります。

JavaScriptを使用

これはautofocus属性のフォールバックです。

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

これは、すぐにページがID barcodeInputで入力内にロードされるようにフォーカスを設定します。

あなたはこのようにそれを行うことができますJQueryを使用している場合：

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

Answer 2

あなたは、バーコードリーダーでは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; 
}