input事件中文觸發(fā)多次問題研究

zorro 發(fā)布于2019-08-26 11:34 / 2155人閱讀

摘要：而則在我們完成當(dāng)前中文的輸入觸發(fā)?？匆韵麓a事件觸發(fā)我們通過，事件來設(shè)置，判斷是否正在進行輸入中文以控制事件的響應(yīng)，看上去沒有問題，但實際執(zhí)行時會發(fā)現(xiàn)在谷歌瀏覽器中執(zhí)行順序要先于，火狐執(zhí)行順序正常，但會響應(yīng)兩次。

我們在網(wǎng)頁中經(jīng)常會遇到實時搜索的情況，或者其他類似需要input實時響應(yīng)的問題，一般情況下，我們是利用input和propertychange事件來監(jiān)聽input內(nèi)容的變化來響應(yīng)，但是有一個問題就是當(dāng)輸入漢字的時候，可能我們要輸入 ‘實時’ 的時候，我們的input框中會出現(xiàn) "shishi"直到我們的空格才會變成 "實時",這也就意味著我們依次響應(yīng)了 "s","sh","shi","shis","shish","shishi","實時"，前面的結(jié)果明顯不是我們需要的，造成了我們很多次無用的提交，如果是接口請求，那更要命，多發(fā)了好多次請求。

　　最早之前有一個稍微能改善的解決方案就是配合一個定時器延時執(zhí)行，這樣能減少請求次數(shù)，但是這個減少是不分情況的減少，還是治標(biāo)不治本。

　　今天偶然看到幾個事件，發(fā)現(xiàn)可以完美解決這種問題。我們來看一下這幾個事件

　　compositionstart ， compositionupdate ，compositionend 　

　 compositionstart 官方解釋：觸發(fā)于一段文字的輸入之前（類似于 keydown 事件，但是該事件僅在若干可見字符的輸入之前，而這些可見字符的輸入可能需要一連串的鍵盤操作、語音識別或者點擊輸入法的備選詞），通俗點，假如我們要輸入一段中文，當(dāng)我們按下第一個字母的時候觸發(fā) 。

　　相應(yīng)的compositionupdate在我們中文開始輸入到結(jié)束完成的每一次keyup觸發(fā)。

　　而compositionend則在我們完成當(dāng)前中文的輸入觸發(fā) 。

　　正題來了，通過上面的事件我們就可以完美的解決中文輸入的響應(yīng)問題了，從compositionstart觸發(fā)開始，意味著中文輸入的開始且還沒完成，所以此時我們不需要做出響應(yīng)，在compositionend觸發(fā)時，表示中文輸入完成，這時我們可以做相應(yīng)事件的處理。

　　所以我們可以設(shè)置一個變量，或者給input定義一個屬性，在compositionstart到compositionend之間對input事件不做出響應(yīng)?？匆韵麓a

$("input").on({
  input : function(e){        
      var flag = e.target.isNeedPrevent;
      if(flag)  return;     
      response() 
  },
  compositionstart : function(e){
      e.target.isNeedPrevent = true ;
  },
  compositionend : function(e){
      e.target.isNeedPrevent = false;        
  }
})
function response(){
  $("div").append("事 件觸發(fā)")
}

我們通過compositionstart，compositionend事件來設(shè)置flag，判斷是否正在進行輸入中文以控制input事件的響應(yīng)，看上去沒有問題，但實際執(zhí)行時會發(fā)現(xiàn)在谷歌瀏覽器中input執(zhí)行順序要先于compositionend，火狐執(zhí)行順序正常，但compositionend會響應(yīng)兩次。這就導(dǎo)致谷歌瀏覽器中輸入漢字不會響應(yīng)input事件。當(dāng)然也可以在compositionend事件中再執(zhí)行一次response事件，這樣的問題是在火狐瀏覽器中會多執(zhí)行一次response，顯然不是最優(yōu)方案。

　　經(jīng)過試驗，發(fā)現(xiàn)keyup和compositionend事件執(zhí)行順序在各大瀏覽器都保持一致，于是我們改成如下代碼：

 $("input").on({
   keyup : function(e){        
       var flag = e.target.isNeedPrevent;
       if(flag)  return;     
       response() 
   },
   compositionstart : function(e){
       e.target.isNeedPrevent = true ;
   },
   compositionend : function(e){
       e.target.isNeedPrevent = false;  
       
   }
})
function response(){
       $("div").append("事 件觸發(fā)")
}

這樣在各個瀏覽器基本保持一致了（兼容compositionstart的瀏覽器）。但是keyup有一個問題，比如通過鼠標(biāo)復(fù)制粘貼的時候并不相應(yīng)keyup事件，所以上面的事情我們還需要再優(yōu)化下，keyup相應(yīng)按鍵事件，input響應(yīng)除了keyup之外的變化事件。代碼如下

$("input").on({
    keyup : function(e){        
        var flag = e.target.isNeedPrevent;
        if(flag)  return;     
        response() ;
        e.target.keyEvent = false ;
        
    },
    keydown : function(e){
        e.target.keyEvent = true ; 
    },
    input : function(e){
        if(!e.target.keyEvent){
            response()
        }        
    },
    compositionstart : function(e){
        e.target.isNeedPrevent = true ;
    },
    compositionend : function(e){
        e.target.isNeedPrevent = false;
        
    }
})
function response(){
        $("div").append("事 件觸發(fā)")
}

最終效果實現(xiàn)：
在線預(yù)覽：

GPU云服務(wù)器云服務(wù)器多次觸發(fā) 多次注冊事件事件觸發(fā) 事件觸發(fā)器

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107153.html

發(fā)表評論

登陸后可評論

0條評論

zorro

男|高級講師

我要關(guān)注我要私信

TA的文章

Python實戰(zhàn)---王者榮耀皮膚爬蟲

閱讀 2457·2021-10-13 09:40
WebRender：讓網(wǎng)頁渲染如絲順滑

閱讀 3345·2019-08-30 13:46
css模塊化思想初探

閱讀 1129·2019-08-29 14:05
Vue2.0全家桶仿騰訊課堂（移動端）

閱讀 2963·2019-08-29 12:48
《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法》筆記——第7章字典和散列表

閱讀 3662·2019-08-26 13:28
input事件中文觸發(fā)多次問題研究

閱讀 2156·2019-08-26 11:34
mpvue開發(fā)小程序的那點小事

閱讀 2291·2019-08-23 18:11
圖片上傳預(yù)覽轉(zhuǎn)壓縮并轉(zhuǎn)base64詳解（dShowImg64.js）

閱讀 1167·2019-08-23 12:26

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

input事件中文觸發(fā)多次問題研究

相關(guān)文章