javascript - 检测输入框何时由键盘填充，何时由条形码扫描仪填充。

Question

我如何以编程方式检测何时通过在键盘上键入填充文本输入以及何时通过条形码扫描仪自动填充文本输入？

score 38 · Accepted Answer

我写了这个答案，因为我的条形码扫描仪摩托罗拉 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);
    }
};

score 13 · Accepted Answer

改编了上面超级有用的Vitall 答案，以使用 IIFE 而不是原型设计，以防万一现在看到这个的人对此感兴趣。

这也使用了“keypress”事件而不是 keyup，这使我能够可靠地使用 KeyboardEvent.key，因为 KeyboardEvent.which 现在已被弃用。我发现这适用于条形码扫描以及磁条卡刷卡。

根据我的经验，使用 keyup 处理刷卡会导致我做额外的工作来处理“Shift”键码，例如 Shift 码后面会跟着表示“/”的代码，预期的字符是“？”。使用'keypress'也解决了这个问题。

(function($) {
    var _timeoutHandler = 0,
        _inputString = '',
        _onKeypress = function(e) {
            if (_timeoutHandler) {
                clearTimeout(_timeoutHandler);
            }
            _inputString += e.key;

            _timeoutHandler = setTimeout(function () {
                if (_inputString.length <= 3) {
                    _inputString = '';
                    return;
                }
                $(e.target).trigger('altdeviceinput', _inputString);
                _inputString = '';

            }, 20);
        };
    $(document).on({
        keypress: _onKeypress
    });
})($);

score 11 · Accepted Answer

好吧，条形码不会触发任何关键事件，因此您可以执行以下操作：

$('#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');
        }
    }
});

根据您想要评估的时间，您可能希望不是在更改时而是在提交时进行此检查，或者其他。

score 11 · Accepted Answer

您可以尝试以下示例，使用 jQuery 插件https://plugins.jquery.com/scannerdetection/

其高度可配置、基于时间的扫描仪检测器。它可以用作基于前缀/后缀、基于时间的条码扫描器的解决方案。

使用教程和最佳实践，以及关于各种条码扫描仪模型以及如何处理它的讨论。http://a.kabachnik.info/jquery-scannerdetection-tutorial.html

$(window).ready(function(){

	//$("#bCode").scannerDetection();

	console.log('all is well');
	
	$(window).scannerDetection();
	$(window).bind('scannerDetectionComplete',function(e,data){
            console.log('complete '+data.string);
            $("#bCode").val(data.string);
        })
        .bind('scannerDetectionError',function(e,data){
            console.log('detection error '+data.string);
        })
        .bind('scannerDetectionReceive',function(e,data){
            console.log('Recieve');
            console.log(data.evt.which);
        })

        //$(window).scannerDetection('success');

<input id='bCode'type='text' value='barcode appears here'/>

score 8 · Accepted Answer

对于 ES6 2019 版本的 Vitall 答案。

const events = mitt()

class BarcodeScaner {
  initialize = () => {
    document.addEventListener('keypress', this.keyup)
    if (this.timeoutHandler) {
      clearTimeout(this.timeoutHandler)
    }
    this.timeoutHandler = setTimeout(() => {
      this.inputString = ''
    }, 10)
  }

  close = () => {
    document.removeEventListener('keypress', this.keyup)
  }

  timeoutHandler = 0

  inputString = ''

  keyup = (e) => {
    if (this.timeoutHandler) {
      clearTimeout(this.timeoutHandler)
      this.inputString += String.fromCharCode(e.keyCode)
    }

    this.timeoutHandler = setTimeout(() => {
      if (this.inputString.length <= 3) {
        this.inputString = ''
        return
      }
      events.emit('onbarcodescaned', this.inputString)

      this.inputString = ''
    }, 10)
  }
}

可以像这样与反应钩子一起使用：

const ScanComponent = (props) => {
  const [scanned, setScanned] = useState('')
  useEffect(() => {
    const barcode = new BarcodeScaner()
    barcode.initialize()
    return () => {
      barcode.close()
    }
  }, [])

  useEffect(() => {
    const scanHandler = code => {
      console.log(code)
      setScanned(code)
    }

    events.on('onbarcodescaned', scanHandler)
    return () => {
      events.off('onbarcodescaned', scanHandler)
    }
  }, [/* here put dependencies for your scanHandler ;) */])
  return <div>{scanned}</div>
}

我使用 npm 中的 mitt 进行活动，但你可以使用任何你喜欢的东西；）

在 Zebra DS4208 上测试

score 3 · Accepted Answer

Vitall 的解决方案只有在您已经按下至少一个键的情况下才能正常工作。如果你不这样做，第一个字符将被忽略（if(this._timeoutHandler) 返回 false 并且不会附加字符）。

如果您想立即开始扫描，可以使用以下代码：

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);
	}
};

score 2 · Accepted Answer

如果您可以为条形码扫描仪设置前缀，我建议这样做（我更改了一点 Vitall 代码）：

var BarcodeScanner = function(options) {
     this.initialize.call(this, options);
};
BarcodeScanner.prototype = {
    initialize: function(options) {
       $.extend(this._options,options);
       if(this._options.debug) console.log("BarcodeScanner: Initializing");
       $(this._options.eventObj).on({
          keydown: $.proxy(this._keydown, this),
       });
    },
    destroy: function() {
        $(this._options.eventObj).off("keyup",null,this._keyup);
        $(this._options.eventObj).off("keydown",null,this._keydown);
    },
    fire: function(str){
        if(this._options.debug) console.log("BarcodeScanner: Firing barcode event with string: "+str);
        $(this._options.fireObj).trigger('barcode',[str]);
    },
    isReading: function(){
        return this._isReading;
    },
    checkEvent: function(e){
        return this._isReading || (this._options.isShiftPrefix?e.shiftKey:!e.shiftKey) && e.which==this._options.prefixCode;
    },
    _options: {timeout: 600, prefixCode: 36, suffixCode: 13, minCode: 32, maxCode: 126, isShiftPrefix: false, debug: false, eventObj: document, fireObj: document},
    _isReading: false,
    _timeoutHandler: false,
    _inputString: '',
    _keydown: function (e) {
        if(this._input.call(this,e))
            return false;
    },
    _input: function (e) {
        if(this._isReading){
            if(e.which==this._options.suffixCode){
                //read end
                if(this._options.debug) console.log("BarcodeScanner: Read END");
                if (this._timeoutHandler) 
                    clearTimeout(this._timeoutHandler);
                this._isReading=false;
                this.fire.call(this,this._inputString);
                this._inputString='';
            }else{
                //char reading
                if(this._options.debug) console.log("BarcodeScanner: Char reading "+(e.which));
                if(e.which>=this._options.minCode && e.which<=this._options.maxCode)
                    this._inputString += String.fromCharCode(e.which);
            }
            return true;
        }else{
            if((this._options.isShiftPrefix?e.shiftKey:!e.shiftKey) && e.which==this._options.prefixCode){
                //start reading
                if(this._options.debug) console.log("BarcodeScanner: Start reading");
                this._isReading=true;
                this._timeoutHandler = setTimeout($.proxy(function () {
                    //read timeout
                    if(this._options.debug) console.log("BarcodeScanner: Read timeout");
                    this._inputString='';
                    this._isReading=false;
                    this._timeoutHandler=false;
                }, this), this._options.timeout);
                return true;
            }
        }
        return false;
    }
};

如果您需要自定义超时、后缀、前缀、最小/最大 ascii 码读取：

new BarcodeScanner({timeout: 600, prefixKeyCode: 36, suffixKeyCode: 13, minKeyCode: 32, maxKeyCode: 126});

我还添加了isShiftPrefix使用这些选项的选项，例如$char 作为前缀：new BarcodeScanner({prefixKeyCode: 52, isShiftPrefix: true});

这是一个小提琴：https ://jsfiddle.net/xmt76ca5/

score 1 · Accepted Answer

您可以在该输入框上使用“onkeyup”事件。如果事件已触发，那么您可以将其称为“从键盘输入”。

score 0 · Accepted Answer

$(window).ready(function(){

	//$("#bCode").scannerDetection();

	console.log('all is well');
	
	$(window).scannerDetection();
	$(window).bind('scannerDetectionComplete',function(e,data){
            console.log('complete '+data.string);
            $("#bCode").val(data.string);
        })
        .bind('scannerDetectionError',function(e,data){
            console.log('detection error '+data.string);
        })
        .bind('scannerDetectionReceive',function(e,data){
            console.log('Recieve');
            console.log(data.evt.which);
        })

        //$(window).scannerDetection('success');

<input id='bCode'type='text' value='barcode appears here'/>

score 0 · Accepted Answer

嗨，我有一个替代解决方案可以在不使用 jQuery 的情况下评估条形码扫描仪的结果，首先您需要并输入在条形码扫描仪工作时具有焦点的文本

<input id="input_resultado" type="text" />

JavaScript 中的代码是：

var elmInputScan = document.getElementById('input_resultado');           

elmInputScan.addEventListener('keypress', function (e){        
  clearInterval( timer_response );    
  timer_response = setTimeout( "onInputChange()", 10);
});

当条形码扫描仪输入文本调用几次按键事件时，但只有我对最终结果感兴趣，因此我使用计时器。就是这样，您可以将值处理到 onInputChange 函数中。

function onInputChange() {    
  console.log( document.getElementById('input_resultado').value );
}

score 0 · Accepted Answer

document.addEventListener("keypress", function (e) {
  if (e.target.tagName !== "INPUT") {
    // it's your scanner
  }
});

score 0 · Accepted Answer

没有一个解决方案对我有用，因为我不想专注于输入。我希望结果页面（项目详细信息页面）继续监听扫描仪扫描下一个项目。我的扫描仪触发按键事件，所以这对我来说就像一个魅力。

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
}

score 0 · Accepted Answer

我发布了一个不依赖 jQuery 或输入字段的轻量级 JS 包。它简单地查看按键事件的时间来确定它是条形码扫描仪还是常规输入。

https://www.npmjs.com/package/@iteexperts/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);
});

score -1 · Accepted Answer

我强烈推荐这个 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>

javascript - 检测输入框何时由键盘填充，何时由条形码扫描仪填充。

14 回答 14

Related

Reference