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

王晗發(fā)布于2019-08-01 18:30 / 1261人閱讀

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

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

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

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

　　compositionstart ， compositionupdate ，compositionend 　

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

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

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

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

　　所以我們可以設(shè)置一個(gè)變量，或者給input定義一個(gè)屬性，在compositionstart到compositionend之間對(duì)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，判斷是否正在進(jìn)行輸入中文以控制input事件的響應(yīng)，看上去沒有問題，但實(shí)際執(zhí)行時(shí)會(huì)發(fā)現(xiàn)在谷歌瀏覽器中input執(zhí)行順序要先于compositionend，火狐執(zhí)行順序正常，但compositionend會(huì)響應(yīng)兩次。這就導(dǎo)致谷歌瀏覽器中輸入漢字不會(huì)響應(yīng)input事件。當(dāng)然也可以在compositionend事件中再執(zhí)行一次response事件，這樣的問題是在火狐瀏覽器中會(huì)多執(zhí)行一次response，顯然不是最優(yōu)方案。

　　經(jīng)過試驗(yàn)，發(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ā)")
}

這樣在各個(gè)瀏覽器基本保持一致了（兼容compositionstart的瀏覽器）。但是keyup有一個(gè)問題，比如通過鼠標(biāo)復(fù)制粘貼的時(shí)候并不相應(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ā)")
}

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/51785.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

王晗

男|高級(jí)講師

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

TA的文章

在 main 函數(shù)之前執(zhí)行代碼（C 語言）

閱讀 2129·2021-09-29 09:35
面試知識(shí)點(diǎn)總結(jié)

閱讀 2012·2019-08-30 14:15
盒子模型，怪異盒子模型

閱讀 3029·2019-08-30 10:56
純css實(shí)現(xiàn)手機(jī)通訊錄

閱讀 1017·2019-08-29 16:59
5分鐘搞定box-sizing

閱讀 638·2019-08-29 14:04
2017 前端面試準(zhǔn)備 - 收藏集 - 掘金

閱讀 1369·2019-08-29 12:30
CSS 樣式優(yōu)先級(jí)

閱讀 1089·2019-08-28 18:19
【js】《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》——this的指向

閱讀 566·2019-08-26 11:51

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章