基于jQuery的扫码枪监听。假如只是想完成监听猎取条码扫码信息，能够直接拿来运用，假如有更多的条码推断处置惩罚逻辑须要本身扩大。

一、功用需求

运用扫码枪扫描条码，在一个web页面监听猎取扫码枪的数据，并制止用户举行手动的输入操纵。

最先的主意异常简朴，由于扫码枪就是模仿键盘的输入，当他用usb接口插进去电脑的时刻，就变成了一个外接的输入装备，用js监听就能够了。然则怎样推断用户是不是为手动输入就须要做一些处置惩罚了。

二、重要题目

1.怎样推断是不是手动输入

2.怎样推断一个条码输入完成

三、解决方案

手动输入的解决办法就是：对照一个键从按下到抬起的时候距离，以及两次按键的时候距离。

由于扫码枪的输入速率异常的快，我测试的扫码枪输入的距离大概在15-60毫秒，然后手动输入的100-200之间，除非锐意的想打破限定举行疾速的输入。这个距离值能够掌握的很小，条件不要快过扫码抢的速率。

输入完成的推断：能够对输入框变化做一个监听，假如到达我们想要的位数，则提交服务器端举行处置惩罚；第二种是基于扫码枪，由于我运用的扫码枪能够设置扫码胜利末了附加一个回车。所以依据回车的keycode就能够推断为输入已完毕，然后猎取输入框的value，再举行后续的处置惩罚(提交服务器等)。

四、代码

时候距离的推断，依赖于jQuery的三个事宜：keydown，keypress,keyup；即键最先按下，已按下，弹起这三个状况，keydown，就是在按键刚刚被按下，但键值还没有写入文本框，keypress已按下而且值已输入到文本框，keyup就是弹起了。

须要做推断的就是按键从按下到抬起的时候距离，与两次keydown的时候距离。

重要的手动输入推断代码。

var barcode = {

listenerObj: null,

oneKeyTime : '', /* 一次按键时候距离 */

twoKeyTime : '', /* 两次按键时候距离 */

keyDownTime: '', /* 键按下的时候 */

barcodeLen : 8 , /* 条形码长度 */

spanTime : 70, /* 一次按键按下到开释的时候距离 */

on_key_down : function (){

var that = this;

this.listenerObj.keydown(function(e){

if(e.which !== 13 && !(that.in_range(e.which))){

$(that.listenerObj).val('');

return ;

}

var d = new Date();

var curTime = parseInt(d.getTime());

if(that.keyDownTime !== '' && that.keyDownTime !== NaN){

that.twoKeyTime = curTime - that.keyDownTime;

}

that.keyDownTime = curTime;

});

},

on_key_up : function(){

var that = this;

this.listenerObj.keyup(function(e){

var d = new Date();

var keyUpTime = d.getTime();

that.oneKeyTime = parseInt(keyUpTime) - parseInt(that.keyDownTime);

var isHand = that.checkHandInput();

if(isHand && that.in_range(e.which)){

layer.msg('制止手动输入');

$(that.listenerObj).val("");

}

})

},

on_key_press : function(){

var that = this;

this.listenerObj.keypress(function(e){

if(e.which == 13 && that.check_barcode()){

that.createListEl();

}

});

},

checkHandInput : function(){

if((this.oneKeyTime > this.spanTime) || this.twoKeyTime > this.spanTime){

return true;

}else{

return false;

}

},

}

将代码整理了一下，放到了Github。

我的js代码中的提醒用到了layer.js，所以假如运用根据index.html中的示例，引入相干的js：

$("#barCode").startListen({

barcodeLen : 10,

letter : true,

number : true,

show : function(code){

layer.msg(code);

}

});

这里可设置的参数：包括条码的长度，是不是包括英文字母，是不是包括数字。以及一个show回调要领，这个要领会在扫码胜利，条码正当的情况下被挪用，返回条码的值，以便做自定义的操纵，如上传服务器等。

代码中对页面的输入框做了stay focus，所以页面有其他的输入需求没法完成，能够撤除keepFocusInput的挪用。

代码很简朴，能够直接浏览，有值得革新的处所迎接指出。