本文主要和大家 分享基於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：
<input id="barCode" value="" type="text" placeholder="stay focus" style="" name="">
$("#barCode").startListen({
barcodeLen : 10,
letter : true,
number : true,
show : function(code){
layer.msg(code);
}
});登入後複製
這裡可設定的參數：包含條碼的長度，是否包含英文字母，是否包含數字。以及一個show回調方法，這個方法會在掃碼成功，條碼合法的情況下被調用，返回條碼的值，以便做自定義的操作，如上傳伺服器等。
程式碼中對頁面的輸入框做了stay focus，所以頁面有其他的輸入需求無法實現，可以除去keepFocusInput的呼叫。
相關推薦：
使用jQuery監聽DOM元素大小變化
jquery監聽div內容的變化具體實現想法_ jquery
jQuery監控文字方塊事件並作對應處理的方法_jquery
以上是jQuery監聽掃碼槍禁止手動輸入的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
