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

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

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

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

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

---

根据您何时评估，您可能不希望在更改时进行检查，而希望在提交时进行检查。我写了这个答案，因为我的条形码扫描仪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);
    }
};

var BarcodeScanerEvents=function（）{
this.initialize.apply（this，参数）；
};
BarCodeScaneEvents.prototype={
初始化：函数（）{
$（文件）({
keyup:$.proxy（this.\u keyup，this）
});
},
_timeoutHandler:0，
_输入字符串：“”，
_键控：功能（e）{
如果（此.\u timeoutHandler）{
clearTimeout（此.\u timeoutHandler）；
this.\u inputString+=String.fromCharCode（e.which）；
} 
此._timeoutHandler=setTimeout（$.proxy（函数）（）{
如果（this.\u inputString.length如果您可以为条形码扫描仪设置前缀，我建议这样做（我对Vitall代码做了一些更改）：

我还添加了
isShiftPrefix
选项，例如使用
$
字符作为前缀，并使用以下选项：
newbarcodescanner（{prefixKeyCode:52，isShiftPrefix:true}）；

这是一个难题：
您可以使用jQuery插件尝试以下示例

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

使用和最佳实践教程，以及各种条形码扫描仪型号和处理方法的讨论


$（窗口）.ready（函数（）{
//$（“#bCode”）.scannerDetection（）；
console.log（“一切正常”）；
$（window.scannerDetection（）；
$（窗口）.bind（'scannerDetectionComplete'，函数（e，数据）{
console.log（'complete'+data.string）；
$（“#bCode”）.val（data.string）；
})
.bind（'scannerDetectionError'，函数（e，数据）{
console.log（'detection error'+data.string）；
})
.bind（'scannerDetectionReceive'，函数（e，数据）{
console.log（'receive'）；
log（data.evt.which）；
})
//$（窗口）。scannerDetection（'success'）；
只有当您至少按了一个键时，Vitall的解决方案才能正常工作。如果不按，则会忽略第一个字符（如果（this.\u timeoutHandler）返回false，并且不会追加字符）

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


var BarcodeScanerEvents=function（）{
this.initialize.apply（this，参数）；
};
BarCodeScaneEvents.prototype={
初始化：函数（）{
$（文件）({
keyup:$.proxy（this.\u keyup，this）
});
},
_timeoutHandler:0，
_输入字符串：“”，
_键控：功能（e）{
如果（此.\u timeoutHandler）{
clearTimeout（此.\u timeoutHandler）；
}
this.\u inputString+=String.fromCharCode（e.which）；
此._timeoutHandler=setTimeout（$.proxy（function（））{
如果（this._inputString.length采用了超级有用的方法来利用iLife而不是原型，以防现在看到这一点的人会对它感兴趣

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

根据我的经验，使用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
    });
})($);

（函数（$）{
var\u timeoutHandler=0，
_inputString=''，
_onKeypress=功能（e）{
if（_timeoutHandler）{
clearTimeout（_timeoutHandler）；
}
_inputString+=e.key；
_timeoutHandler=setTimeout（函数（）{
如果（_inputString.length
$（窗口）.ready（函数（）{
//$（“#bCode”）.scannerDetection（）；
console.log（“一切正常”）；
$（window.scannerDetection（）；
$（窗口）.bind（'scannerDetectionComplete'，函数（e，数据）{
console.log（'complete'+data.string）；
$（“#bCode”）.val（data.string）；
})
.bind（'scannerDetectionError'，函数（e，数据）{
console.log（'detection error'+data.string）；
})
.bind（'scannerDetectionReceive'，函数（e，数据）{
console.log（'receive'）；
log（data.evt.which）；
})
//$（窗口）。scannerDetection（'success'）；
您好，我有一个替代解决方案，用于在不使用jQuery的情况下评估条形码扫描仪的结果，首先您需要并输入在条形码扫描仪工作时具有焦点的文本

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

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

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

对于ES6 2019版的Vitall answer


const events=mitt（）
类条码扫描器{
初始化=（）=>{
document.addEventListener（'keypress'，this.keypup）
if（this.timeoutHandler）{
clearTimeout（this.timeoutHandler）
}
this.timeoutHandler=setTimeout（（）=>{
this.inputString=“”
}, 10)
}
关闭=（）=>{
document.removeEventListener（'keypress'，this.keypup）
}
timeoutHandler=0
inputString=''
keyup=（e）=>{
if（this.timeoutHandler）{
clearTimeout（this.timeoutHandler）
this.inputString+=String.fromCh
<input id="input_resultado" type="text" />

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

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

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

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