web-dev-qa-db-ja.com

Javascript：ハンドヘルドバーコードスキャナーの最適な読み取り方法

ハンドヘルドスキャナーでバーコードをスキャンし、Javascriptで結果を処理できるようにしたいと思います。

バーコードスキャナーは、ほとんどキーボードのように機能します。スキャン/翻訳された（バーコード->数字）データをそのまま出力します（右？）。実際には、出力をキャッチして続行するだけです。しかし、どのように？

ここに私が仕事をしたいいくつかの擬似コードがあります：

$(document).on("scanButtonDown", "document", function(e) {
    // get scanned content
    var scannedProductId = this.getScannedContent();

    // get product 
    var product = getProductById(scannedProductId);

    // add productname to list
    $("#product_list").append("<li>" + product.name + "</li>");
});
  • アイデア（フレームワーク、プラグイン、スニペット）はありますか？
  • バーコードスキャナー（ハードウェア）の推奨事項はありますか？

前もって感謝します！

this および this の良い質問が見つかりましたが、処理に関する詳細情報を取得したいと思います。私の場合、テキストエリアに焦点を合わせるだけでは不十分かもしれません。

javascriptjqueryajaxangularjsbarcode-scanner
22
Mr. B.

scanButtonDownなどのイベントをキャッチするスキャナーにアクセスできないため、擬似コードは機能しません。唯一のオプションは、キーボードとまったく同じように動作するHIDスキャナーです。スキャナー入力とキーボード入力を区別するには、タイマーベースまたはプレフィックスベースの2つのオプションがあります。

タイマーベース

スキャナーは、ユーザーがキーボードで（賢明に）できるよりもはるかに高速に文字を入力する可能性があります。キーストロークの受信速度を計算し、getProductsId関数に渡す変数への高速入力をバッファリングします。 @Vitallは バーコードスキャナー入力をキャッチするための再利用可能なjQueryソリューション を作成しました。onbarcodescannedイベントをキャッチする必要があります。

プレフィックスベース

ほとんどのスキャナーは、スキャンされたすべてのデータにプレフィックスを付けるように構成できます。プレフィックスを使用してすべての入力のインターセプトを開始し、バーコードを取得したら入力のインターセプトを停止できます。

完全開示：私は、ハンドヘルドスキャナーを製造するSocket Mobile、Inc.のコンサルタントとして働いています。

26
Enrico

多くの調査とテストを行った後、フォーム入力に焦点を合わせずにバーコードスキャナーから入力をキャプチャすることが、私にとって最も効果的なものでした。 keydownおよびtextInputイベントをリッスンします。

textInputイベントは、pasteイベントのように機能します。その後、バーコードデータ全体が含まれます。私の場合、UPCバーコード。e.preventDefault()は、バーコードデータがフォーム入力に挿入されないようにします：

document.addEventListener('textInput', function (e){
    if(e.data.length >= 6){
        console.log('IR scan textInput', e.data);
        e.preventDefault();
    }
});

これをAndroid 4.4および7.0でCipherLab IRスキャナーでテストしました。

keydownイベントをリッスンする例。私の場合、フォーム入力がフォーカスされていない限り、ユーザーはバーコードをスキャンしていると想定できます。

    let UPC = '';
    document.addEventListener("keydown", function(e) {
        const textInput = e.key || String.fromCharCode(e.keyCode);
        const targetName = e.target.localName;
        let newUPC = '';
        if (textInput && textInput.length === 1 && targetName !== 'input'){
            newUPC = UPC+textInput;

          if (newUPC.length >= 6) {
            console.log('barcode scanned:  ', newUPC);
          } 
       }
    }

もちろん、文字列の長さをチェックしてスキャンを決定するのではなく、e.keyCode === 13keydownイベントリスナー。

すべてのIRスキャナーがtextInputイベントをトリガーするわけではありません。お使いのデバイスがそうでない場合は、次に類似したものを放出しているかどうかを確認できます：

monitorEvents(document.body);

ここでこの監視のトリックを見つけました： jQueryの要素によって発生したすべてのイベントをどのように記録しますか？

7
jfbloom22

OK、だからここに私がやった方法だ。スキャナーをセットアップして、プレフィックスを追加します（私の場合は、Ctrl + 2またはASCIIコード002（制御コード）を使用して、キーボードから簡単に入力できないようにしました）。これを変更して、バーコードデータにエンターが含まれている場合は、各バーコードスキャン後にCtrl + 3またはASCIIコード003などを使用します）。 jQueryでは、keypressイベントをキャプチャし、プレフィックスを探します。その後、すべてを文字列にキャプチャし、アプリがリッスンできるカスタムイベントを起動します。 keypressイベントを防止しているため、ユーザーはテキストフィールドにいることができ、バーコードをスキャンすることができます。

さらに、各バーコードには、スキャンするバーコードの種類を識別するために使用する1桁のプレフィックスがあります。例：

  • E：従業員バッジ
  • S：スーパーバイザーバッジ
  • I：アイテム番号
let barcodeRead = '';
let readingBarcode = false;

let handleKeyPress = (e) => {
    if (e.keyCode === 2) {
        // Start of barcode
        readingBarcode = true;
        e.preventDefault();
        return;
    }

    if (readingBarcode) {
        e.preventDefault();

        if (e.keyCode === 13) { // Enter
            readingBarcode = false;
            const evt = $.Event('barcodeScan');
            evt.state = {
                type: barcodeRead.substr(0, 1),
                code: barcodeRead.substr(1),
            };
            $(window).trigger(evt);
            barcodeRead = '';
            return;
        }

        // Append the next key to the end of the list
        barcodeRead += e.key;
    }
}

$(window).bind('keypress', handleKeyPress);

このプレフィックスにより、バーコードのタイプを識別し、このページで処理する必要があるかどうかを確認できるようになりました。例：

$(window).bind('barcodeScan', (e) => {
    if (e.state.type !== 'E') {
        alert('Please scan your employee badge only!');
    } else {
        $('#employee-badge').val(e.state.code);
    }
});
4
FrankerZ

バーコードスキャナーは、ほとんどキーボードのように機能します。

モデルによって異なります。私が使用したものはすべて、キーボードとまったく同じように機能します（少なくともコンピューターに関する限り）

スキャン/翻訳された（バーコード->数字）データをそのまま出力します（右？）。

キーコードを出力します。

$(document).on("scanButtonDown"

おそらくkeypressではなくscanButtonDownが必要でしょう。

イベントオブジェクトを見て、押された「キー」を判別します。

コード全体がスキャンされたタイミングを判断するには、「データの終わり」キー（スペースまたはリターン）を取得するか、入力されている文字数をカウントする必要があります。

2
Quentin
var txt = "";
function selectBarcode() {
    if (txt != $("#focus").val()) {
        setTimeout('use_rfid()', 1000);
        txt = $("#focus").val();
    }
    $("#focus").select();
    setTimeout('selectBarcode()', 1000);
}

$(document).ready(function () {
    setTimeout(selectBarcode(),1000);       
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<input type="text" name="tag" id="focus" placeholder="Use handheld RFID scanner">
1
boateng

私はバーコードスキャンとクレジットカードスキャン（jQuery上に構築）を処理するプラグインの作業を開始しました：

https://github.com/ericuldall/jquery-pos

簡単な実装：

$(function(){
    $(document).pos();
    $(document).on('scan.pos.barcode', function(event){
        var barcode = event.code;
        //handle your code here....
    });
});

これまでのところ、このプラグインは1種類のスキャナーと数字のみを含むコードでのみテストされていますが、それ以外の要件が機能しない場合は、お客様のニーズに合わせて調整させていただきます。 githubページをチェックして、旋回してください。貢献が奨励されています。

E

1
Eric Uldall

私は少し遅れていますが、ここでいくつかの答えに基づいてこの作業を行いました。

let code = "";
let reading = false;
document.addEventListener('keypress', e=>{
  //usually scanners throw an 'Enter' key at the end of read
   if (e.keyCode===13){
          if(code.length>10){
            console.log(code);
            /// code ready to use                
            code="";
         }
    }else{
         code+=e.key;//while this is not an 'enter' it stores the every key            
    }
   //run a timeout of 200ms at the first read and clear everything
    if(!reading){
         reading=true;
         setTimeout(()=>{
          code="";
          reading=false;
      }, 200);} //200 works fine for me but you can adjust it
1
Hanz Herdel