摘要：一功能需求使用掃碼槍掃描條碼，在一個(gè)頁(yè)面監(jiān)聽(tīng)獲取掃碼槍的數(shù)據(jù)，并禁止用戶進(jìn)行手動(dòng)的輸入操作。因?yàn)閽叽a槍的輸入速度非常的快，我測(cè)試的掃碼槍輸入的間隔大概在毫秒，然后手動(dòng)輸入的之間，除非刻意的想突破限制進(jìn)行快速的輸入。

基于jQuery的掃碼槍監(jiān)聽(tīng)。如果只是想實(shí)現(xiàn)監(jiān)聽(tīng)獲取條碼掃碼信息，可以直接拿來(lái)使用，如果有更多的條碼判斷處理邏輯需要自己擴(kuò)展。
一、功能需求

使用掃碼槍掃描條碼，在一個(gè)web頁(yè)面監(jiān)聽(tīng)獲取掃碼槍的數(shù)據(jù)，并禁止用戶進(jìn)行手動(dòng)的輸入操作。

開(kāi)始的想法非常簡(jiǎn)單，因?yàn)閽叽a槍就是模擬鍵盤(pán)的輸入，當(dāng)他用usb接口插入電腦的時(shí)候，就變成了一個(gè)外接的輸入設(shè)備，用js監(jiān)聽(tīng)就可以了。但是如何判斷用戶是否為手動(dòng)輸入就需要做一些處理了。
二、主要問(wèn)題

1.如何判斷是否手動(dòng)輸入

2.如何判斷一個(gè)條碼輸入完成
三、解決方案

手動(dòng)輸入的解決辦法就是：對(duì)比一個(gè)鍵從按下到抬起的時(shí)間間隔，以及兩次按鍵的時(shí)間間隔。

因?yàn)閽叽a槍的輸入速度非常的快，我測(cè)試的掃碼槍輸入的間隔大概在15-60毫秒，然后手動(dòng)輸入的100-200之間，除非刻意的想突破限制進(jìn)行快速的輸入。這個(gè)間隔值可以控制的很小，前提不要快過(guò)掃碼搶的速度。

輸入完成的判斷：可以對(duì)輸入框變化做一個(gè)監(jiān)聽(tīng)，如果達(dá)到我們想要的位數(shù)，則提交服務(wù)器端進(jìn)行處理；第二種是基于掃碼槍?zhuān)驗(yàn)槲沂褂玫膾叽a槍可以配置掃碼成功最后附加一個(gè)回車(chē)。所以根據(jù)回車(chē)的keycode就可以判斷為輸入已經(jīng)結(jié)束，然后獲取輸入框的value，再進(jìn)行后續(xù)的處理（提交服務(wù)器等）。
四、代碼

時(shí)間間隔的判斷，依賴于jQuery的三個(gè)事件：keydown，keypress,keyup；即鍵開(kāi)始按下，已經(jīng)按下，彈起這三個(gè)狀態(tài)，keydown，就是在按鍵剛剛被按下，但鍵值還沒(méi)有寫(xiě)入文本框，keypress已經(jīng)按下并且值已經(jīng)輸入到文本框，keyup就是彈起了。

需要做判斷的就是按鍵從按下到抬起的時(shí)間間隔，與兩次keydown的時(shí)間間隔。

主要的手動(dòng)輸入判斷代碼。

var barcode = {
    listenerObj: null,
    oneKeyTime : "", /* 一次按鍵時(shí)間間隔 */
    twoKeyTime : "", /* 兩次按鍵時(shí)間間隔 */
    keyDownTime: "", /* 鍵按下的時(shí)間    */
    barcodeLen : 8 , /* 條形碼長(zhǎng)度      */
    spanTime   : 70, /* 一次按鍵按下到釋放的時(shí)間間隔 */
    
    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("禁止手動(dòng)輸入");
                $(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中的示例，引入相關(guān)的js：

$("#barCode").startListen({
    barcodeLen : 10,
    letter : true,
    number : true,
    show : function(code){
        layer.msg(code);
    }
});

這里可配置的參數(shù)：包括條碼的長(zhǎng)度，是否包含英文字母，是否包含數(shù)字。以及一個(gè)show回調(diào)方法，這個(gè)方法會(huì)在掃碼成功，條碼合法的情況下被調(diào)用，返回條碼的值，以便做自定義的操作，如上傳服務(wù)器等。

代碼中對(duì)頁(yè)面的輸入框做了stay focus，所以頁(yè)面有其他的輸入需求無(wú)法實(shí)現(xiàn)，可以除去keepFocusInput的調(diào)用。

代碼很簡(jiǎn)單，可以直接閱讀，有值得改進(jìn)的地方歡迎指出。

推薦一款適合二次開(kāi)發(fā)的掃描槍?zhuān)篗S3398迷你條碼掃描槍