input事件中文觸發多次問題研究

王晗發布于2019-08-01 18:30 / 1170人閱讀

摘要：而則在我們完成當前中文的輸入觸發。看以下代碼事件觸發我們通過，事件來設置，判斷是否正在進行輸入中文以控制事件的響應，看上去沒有問題，但實際執行時會發現在谷歌瀏覽器中執行順序要先于，火狐執行順序正常，但會響應兩次。

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

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

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

　　compositionstart ， compositionupdate ，compositionend 　

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

　　相應的compositionupdate在我們中文開始輸入到結束完成的每一次keyup觸發。

　　而compositionend則在我們完成當前中文的輸入觸發。

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

　　所以我們可以設置一個變量，或者給input定義一個屬性，在compositionstart到compositionend之間對input事件不做出響應。看以下代碼

$("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("事 件觸發")
}

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

　　經過試驗，發現keyup和compositionend事件執行順序在各大瀏覽器都保持一致，于是我們改成如下代碼：

 $("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("事 件觸發")
}

這樣在各個瀏覽器基本保持一致了（兼容compositionstart的瀏覽器）。但是keyup有一個問題，比如通過鼠標復制粘貼的時候并不相應keyup事件，所以上面的事情我們還需要再優化下，keyup相應按鍵事件，input響應除了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("事 件觸發")
}

最終效果實現：
在線預覽：

云服務器 GPU云服務器多次觸發多次注冊事件事件觸發事件觸發器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51785.html

input事件中文觸發多次問題研究

摘要：而則在我們完成當前中文的輸入觸發。看以下代碼事件觸發我們通過，事件來設置，判斷是否正在進行輸入中文以控制事件的響應，看上去沒有問題，但實際執行時會發現在谷歌瀏覽器中執行順序要先于，火狐執行順序正常，但會響應兩次。我們在網頁中經常會遇到實時搜索的情況，或者其他類似需要input實時響應的問題，一般情況下，我們是利用input和propertychange事件來監聽input內容的變化來...

zorro 2019-08-26 11:34 評論0 收藏0
從0開始構建自己的前端知識體系-JS-事件-鍵盤事件總結

摘要：在探尋的過程中發現自己對鍵盤輸入事件的理解還并不到位，以至于有一些代碼看得云里霧里，趕緊查閱資料寫寫總結一下下文所說只在與里做了探究。短按觸發順序長按觸發順序循環事件阻止冒泡這類事件都會冒泡，阻止按照常規調用接口就可以阻止冒泡了。前言最近因一個需求在element-ui的Select組件文檔內找不到對應的示例，也就是filter-method方法的具體使用樣例，嘗試幾次之后也使用了...

Anonymous1 2019-08-22 15:55 評論0 收藏0
中文輸入法與React文本輸入框的問題與解決方案

摘要：本文的目的是希望能針對這個問題提供一些說明現在暫時性的解決方案。完全不會有問題的只有一個瀏覽器，就是上面注釋中所說的已經實作出的，上可能根本不需要任何解決方案，它的輸入法編輯器是獨立于瀏覽器上的文本輸入框之外的。問題來源是來自這個React官方存儲庫的issue #3926，與這個議題關聯的有很多其他的issue，來自許多項目，有些是與React相關，有些則是vue或其它JS套件。也...

shevy 2019-08-21 15:01 評論0 收藏0
工作手記之移動端中文輸入法觸發oninput事件的解決方法

摘要：經過在網上的查找，找到了和兩個事件進行一個開關判斷。關于事件是的標準事件，對于檢測和這幾個元素通過用戶界面發生的內容變化非常有用，在內容修改后立即被觸發，不像事件需要失去焦點才觸發。補充最近測試了下發現在事件之后才觸發。。。事件背景工作過程中涉及到了移動端輸入內容長度的限定，這就要求需要對輸入過程中內容的變化進行監控和判定，以決定是否可以繼續輸入，所以就想著是否可以在相關輸入處監聽...

姘存按 2019-08-20 12:21 評論0 收藏0
前端培訓-初級階段-場景實戰（2019-05-30）-input 搜索如何防抖，如何處理中文輸入

摘要：在掘金摸魚的時候看到了一個題第題搜索如何防抖，如何處理中文輸入，感覺挺有意思的。測試地址事件輸入法事件輸入法的第一個字母時觸發。輸入法狀態輸入內容。輸入法選擇之后觸發。前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本著提升技術水平，打牢基礎知識的中心思想，我...

Yuanf 2019-08-26 13:57 評論0 收藏0