使用jQuery監聽掃碼槍輸入並禁止手動輸入的實現方法

基於jQuery的掃碼槍監聽。若是隻是想實現監聽獲取條碼掃碼信息，能夠直接拿來使用，若是有更多的條碼判斷處理邏輯須要本身擴展。
1、功能需求

使用掃碼槍掃描條碼，在一個web頁面監聽獲取掃碼槍的數據，並禁止用戶進行手動的輸入操做。

開始的想法很是簡單，由於掃碼槍就是模擬鍵盤的輸入，當他用usb接口插入電腦的時候，就變成了一個外接的輸入設備，用js監聽就能夠了。可是如何判斷用戶是否爲手動輸入就須要作一些處理了。
2、主要問題

1.如何判斷是否手動輸入

2.如何判斷一個條碼輸入完成
3、解決方案

手動輸入的解決辦法就是：對比一個鍵從按下到擡起的時間間隔，以及兩次按鍵的時間間隔。

由於掃碼槍的輸入速度很是的快，我測試的掃碼槍輸入的間隔大概在15-60毫秒，而後手動輸入的100-200之間，除非刻意的想突破限制進行快速的輸入。這個間隔值能夠控制的很小，前提不要快過掃碼搶的速度。

輸入完成的判斷：能夠對輸入框變化作一個監聽，若是達到咱們想要的位數，則提交服務器端進行處理；第二種是基於掃碼槍，由於我使用的掃碼槍能夠配置掃碼成功最後附加一個回車。因此根據回車的keycode就能夠判斷爲輸入已經結束，而後獲取輸入框的value，再進行後續的處理（提交服務器等）。
4、代碼

時間間隔的判斷，依賴於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的調用。

代碼很簡單，能夠直接閱讀，有值得改進的地方歡迎指出。

推薦一款適合二次開發的掃描槍：MS3398迷你條碼掃描槍