欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用jQuery監(jiān)聽掃碼槍輸入并禁止手動輸入的實現(xiàn)方法(推薦)

 更新時間:2017年03月21日 09:54:33   作者:BigNerd  
基于jQuery的掃碼槍監(jiān)聽。如果只是想實現(xiàn)監(jiān)聽獲取條碼掃碼信息,可以直接拿來使用,如果有更多的條碼判斷處理邏輯需要自己擴展哦

基于jQuery的掃碼槍監(jiān)聽。如果只是想實現(xiàn)監(jiān)聽獲取條碼掃碼信息,可以直接拿來使用,如果有更多的條碼判斷處理邏輯需要自己擴展。

一、功能需求

使用掃碼槍掃描條碼,在一個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" style="" name="">
$("#barCode").startListen({
  barcodeLen : 10,
  letter : true,
  number : true,
  show : function(code){
    layer.msg(code);
  }
});

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

代碼中對頁面的輸入框做了stay focus,所以頁面有其他的輸入需求無法實現(xiàn),可以除去keepFocusInput的調(diào)用。

以上所述是小編給大家介紹的使用jQuery監(jiān)聽掃碼槍輸入并禁止手動輸入的實現(xiàn)方法(推薦),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • jQuery實現(xiàn)的倒計時效果實例小結(jié)

    jQuery實現(xiàn)的倒計時效果實例小結(jié)

    這篇文章主要介紹了jQuery實現(xiàn)的倒計時效果,結(jié)合實例形式總結(jié)分析了jQuery針對日期與時間的運算實現(xiàn)倒計時功能的相關(guān)技巧,需要的朋友可以參考下
    2016-04-04
  • jQuery開發(fā)仿QQ版音樂播放器

    jQuery開發(fā)仿QQ版音樂播放器

    這篇文章主要介紹了jQuery開發(fā)仿QQ版的音樂播放器,文中示例代碼非常詳細,幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下
    2020-07-07
  • jQuery Raty星級評分插件使用方法實例分析

    jQuery Raty星級評分插件使用方法實例分析

    這篇文章主要介紹了jQuery Raty星級評分插件使用方法,結(jié)合實例形式分析了jquery Raty星級評分插件的下載、調(diào)用、基本屬性及相關(guān)使用技巧,需要的朋友可以參考下
    2019-11-11
  • jQuery超簡單選項卡完整實例

    jQuery超簡單選項卡完整實例

    這篇文章主要介紹了jQuery超簡單選項卡實現(xiàn)方法,以一個完整實例形式較為詳細的分析了jQuery實現(xiàn)選項卡切換功能的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下
    2015-09-09
  • 基于jquery的氣泡提示效果

    基于jquery的氣泡提示效果

    氣泡默認出現(xiàn)在觸發(fā)對象的正上方,當(dāng)觸發(fā)對象在邊上時,氣泡會有一部分出現(xiàn)在窗口外面
    2010-05-05
  • 聊一聊jQuery插件uploadify使用方法

    聊一聊jQuery插件uploadify使用方法

    聊一聊jQuery插件uploadify使用方法,這篇文章主要總結(jié)了uploadify使用的一些經(jīng)驗,感興趣的小伙伴們可以參考一下
    2016-08-08
  • jQuery實現(xiàn)鍵盤回車搜索功能

    jQuery實現(xiàn)鍵盤回車搜索功能

    本文通過代碼給大家介紹了jquery實現(xiàn)鍵盤回車搜索功能,前臺代碼和搜索按鈕實現(xiàn)代碼都給大家貼出了,需要的朋友參考下吧
    2017-07-07
  • jQuery+PHP+MySQL二級聯(lián)動下拉菜單實例講解

    jQuery+PHP+MySQL二級聯(lián)動下拉菜單實例講解

    這篇文章主要介紹了一款jQuery+PHP+MySQL三者結(jié)合實現(xiàn)的二級聯(lián)動下拉菜單,需要的朋友可以參考下
    2015-10-10
  • 解析jquery easyui tree異步加載子節(jié)點問題

    解析jquery easyui tree異步加載子節(jié)點問題

    本篇文章主要介紹解析jquery easyui tree異步加載子節(jié)點問題,easyui中的樹可以從標(biāo)記中建立,也可以通過指定一個URL屬性讀取數(shù)據(jù)建立,有興趣的可以了解一下。
    2017-03-03

最新評論