javascript - 入力ボックスがキーボードで入力されたときと、バーコード スキャナーで入力されたときを検出します。

Question

キーボードでの入力によってテキスト入力が入力されたときと、バーコード スキャナーによって自動的に入力されたときをプログラムで検出するにはどうすればよいですか?

Answer 1

バーコード スキャナー Motorola LS1203 がキープレス イベントを生成したため、この回答を書いたので、Utkanos のソリューションを使用できません。

私の解決策は次のとおりです。

var BarcodeScanerEvents = function() {
     this.initialize.apply(this, arguments);
};

BarcodeScanerEvents.prototype = {
    initialize: function() {
       $(document).on({
          keyup: $.proxy(this._keyup, this)
       });
    },
    _timeoutHandler: 0,
    _inputString: '',
    _keyup: function (e) {
        if (this._timeoutHandler) {
            clearTimeout(this._timeoutHandler);
            this._inputString += String.fromCharCode(e.which);
        } 

        this._timeoutHandler = setTimeout($.proxy(function () {
            if (this._inputString.length <= 3) {
                this._inputString = '';
                return;
            }

            $(document).trigger('onbarcodescaned', this._inputString);

            this._inputString = '';

        }, this), 20);
    }
};

Answer 2

バーコードは重要なイベントを発生させないため、次のようなことができます。

$('#my_field').on({
    keypress: function() { typed_into = true; },
    change: function() {
        if (typed_into) {
            alert('type');
            typed_into = false; //reset type listener
        } else {
            alert('not type');
        }
    }
});

これをいつ評価したいかによっては、このチェックを変更時ではなく送信時などに実行したい場合があります。

Answer 3

その入力ボックスで「onkeyup」イベントを使用できます。イベントがトリガーされた場合は、「キーボードからの入力」と呼ぶことができます。

Answer 4

jQuery や入力フィールドに依存しない軽量の JS パッケージを公開しました。keyPress イベントのタイミングを単純に調べて、それがバーコード スキャナーか通常の入力かを判断します。

https://www.npmjs.com/package/@iexperts/barcode-scanner

import {BarcodeScanner} from "@itexperts/barcode-scanner";

let options = {
  timeOut: 130,
  characterCount: 13
}

let barcodeScanner = new BarcodeScanner(options);
barcodeScanner.addEventListener('scan', function(e){
    let barcode = e.detail;
    console.log(barcode);
});

Answer 5

入力に集中したくないので、どの解決策もうまくいきませんでした。結果ページ（アイテムの詳細ページ）で、スキャナーが次のアイテムをスキャンするのを待ち続けたいと思います。私のスキャナーは keypress イベントを発生させるので、これは私にとって魅力のように機能しました。

var inputTemp = '';
var inputTempInterval = setInterval(function() {
    // change 5 as minimum length of the scan code
    if (inputTemp.length >= 5) {
        var detected = inputTemp;
        inputTemp = '';
        clearInterval(inputTempInterval); // stop listening if you don't need anymore
        onScannerTrigger(detected);
        
    } else {
        inputTemp = '';
    }
    
}, 100);

$(window).keypress(function(e){   
    inputTemp += String.fromCharCode(e.which);
});

function onScannerTrigger(scannedCode) {
    console.log(scannedCode);
    // do your stuff
}

Answer 6

この js プラグインを強くお勧めしますhttps://github.com/axenox/onscan.js 使いやすく、ニーズを満たすオプションがたくさんあります。

<script src="path-to-onScan.js"></script>
script>
// Initialize with options
onScan.attachTo(document, {
    suffixKeyCodes: [13], // enter-key expected at the end of a scan
    reactToPaste: true, // Compatibility to built-in scanners in paste-mode (as opposed to keyboard-mode)
    onScan: function(sCode, iQty) { // Alternative to document.addEventListener('scan')
        console.log('Scanned: ' + iQty + 'x ' + sCode); 
    },
    onKeyDetect: function(iKeyCode){ // output all potentially relevant key events - great for debugging!
        console.log('Pressed: ' + iKeyCode);
    }
});
</script>