基于jQuery的掃碼槍監(jiān)聽。如果只是想實現(xiàn)監(jiān)聽獲取條碼掃碼信息,可以直接拿來使用,如果有更多的條碼判斷處理邏輯需要自己擴展。
成都創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、中原網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為中原等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
使用掃碼槍掃描條碼,在一個web頁面監(jiān)聽獲取掃碼槍的數(shù)據(jù),并禁止用戶進行手動的輸入操作。
開始的想法非常簡單,因為掃碼槍就是模擬鍵盤的輸入,當(dāng)他用usb接口插入電腦的時候,就變成了一個外接的輸入設(shè)備,用js監(jiān)聽就可以了。但是如何判斷用戶是否為手動輸入就需要做一些處理了。
1.如何判斷是否手動輸入
2.如何判斷一個條碼輸入完成
手動輸入的解決辦法就是:對比一個鍵從按下到抬起的時間間隔,以及兩次按鍵的時間間隔。
因為掃碼槍的輸入速度非常的快,我測試的掃碼槍輸入的間隔大概在15-60毫秒,然后手動輸入的100-200之間,除非刻意的想突破限制進行快速的輸入。這個間隔值可以控制的很小,前提不要快過掃碼搶的速度。
輸入完成的判斷:可以對輸入框變化做一個監(jiān)聽,如果達到我們想要的位數(shù),則提交服務(wù)器端進行處理;第二種是基于掃碼槍,因為我使用的掃碼槍可以配置掃碼成功最后附加一個回車。所以根據(jù)回車的keycode就可以判斷為輸入已經(jīng)結(jié)束,然后獲取輸入框的value,再進行后續(xù)的處理(提交服務(wù)器等)。
時間間隔的判斷,依賴于jQuery的三個事件:keydown,keypress,keyup;即鍵開始按下,已經(jīng)按下,彈起這三個狀態(tài),keydown,就是在按鍵剛剛被按下,但鍵值還沒有寫入文本框,keypress已經(jīng)按下并且值已經(jīng)輸入到文本框,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中的示例,引入相關(guān)的js:
<input id="barCode" value="" type="text" placeholder="stay focus" name="">$("#barCode").startListen({ barcodeLen : 10, letter : true, number : true, show : function(code){ layer.msg(code); }});
運行效果圖:
這里可配置的參數(shù):包括條碼的長度,是否包含英文字母,是否包含數(shù)字。以及一個show回調(diào)方法,這個方法會在掃碼成功,條碼合法的情況下被調(diào)用,返回條碼的值,以便做自定義的操作,如上傳服務(wù)器等。
分享名稱:使用jQuery監(jiān)聽掃碼槍輸入并禁止手動輸入的實現(xiàn)方法
標(biāo)題URL:http://muchs.cn/article10/gedhdo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊、品牌網(wǎng)站建設(shè)、、品牌網(wǎng)站設(shè)計、自適應(yīng)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)