web-dev-qa-db-ja.com

Webアプリケーションでバーコードスキャナーを使用する方法

Laravelアプリケーションでバーコードスキャナーを使用したい。これはオンラインのPOSアプリケーションです。バーコードスキャナーが文字列のみを返し、Enterボタンを押すことを知っています。しかしこの文字列をキャプチャするにはIフォームを使用して入力フィールドも選択する必要があります。入力フィールドを選択しないとデータをキャプチャできません。フォームを選択せず​​にバーコードスキャナーを操作したいのですが、とにかく可能ですか？

javascriptphplaravelweb-applicationsbarcode
5
Mehedi Jaman

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

autofocus 属性

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

autofocus属性を使用できますが、これはどのブラウザでもサポートされていない可能性があります。

Javascriptを使用する

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

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

これにより、ページがID barcodeInputの入力内に読み込まれるとすぐにフォーカスが設定されます。

JQueryを使用している場合は、次の方法で実行できます。

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

バーコードリーダーが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;
}
4
Quentin