input、textarea等輸入框輸入中文時，拼音在輸入框內會觸發input事件的問題

監聽文本輸入框的input事件，在拼寫漢字（輸入法）但漢字並未實際填充到文本框中（選詞）時會觸發input事件，如圖：

但是在很多情況下，只需要輸入到輸入框的中文字符。

解決辦法：

通過查閱資料得知在輸入中文（包括語音識別時）會先后觸發compositionstart、compositionend事件，類似於keydown和keyup的組合。

觸發compositionstart時，文本框會填入 “虛擬文本”（待確認文本），同時觸發input事件；在觸發compositionend時，就是填入實際內容后（已確認文本）。

先看看 compositionstart 的描述 和 compositionend 的 描述

compositionstart 事件觸發於一段文字的輸入之前（類似於 keydown 事件，但是該事件僅在若干可見字符的輸入之前，而這些可見字符的輸入可能需要一連串的鍵盤操作、語音識別或者點擊輸入法的備選詞）。

compositionend  當文本段落的組織已經完成或取消時，會觸發該事件。

觸發如下：

即每按下一個拼音字符，都會觸發input事件，選擇中文也會觸發input事件，但是在刪除輸入框內中文的時候不會觸發compositionend 事件，所以獲取輸入框內容還是要放到input事件里。

思路： 聲明一個標記flag，在compositionstart、compositionend兩個事件過程之間的時候flag值為false，在input事件中通過flag的值來判斷當前輸入的狀態。

 

　　　　var flag = true;
       $('#input').on({
            compositionstart:function(){flag = false;},
            compositionend:function(){flag = true;},
            input:function(){
                var _this = this;
                setTimeout(function(){
                    if(flag){
                        console.log($(_this).val());
                    }
                },0);
            }
        });

 

 tips：
　　為什么使用延時器？
　　因為選詞結束的時候input會比compositionend先一步觸發，此時flag還未調整為true，所以不能觸發到console，故用setTimeout將其優先級滯后。

 

 

參考：https://www.cnblogs.com/lonhon/p/7643095.html