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

時間 2019-11-30

標籤 input 輸入中文拼音框內觸發事件問題简体版

原文原文鏈接

問題描述：html

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

需求：選詞完成後觸發input事件，只觸發一次。this

解決辦法：spa

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

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

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

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

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

我的理解： get

　　compositionstart 在輸入一段須要確認的文本如拼音to漢字、語音時會觸發

　　compositionend 在拼音選詞完成、語音輸入完畢時會觸發

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

OK，接下來貼出示例代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
        <title></title>
    </head>
    <body>
    <input id="txt" type="text">
    <script>
        var flag = true;
        $('#txt').on('compositionstart',function(){
            flag = false;
        })
        $('#txt').on('compositionend',function(){
            flag = true;
        })
        $('#txt').on('input',function(){
            var _this = this;
            setTimeout(function(){
                if(flag){
                    console.log($(_this).val());
                }
            },0)
        })
    </script>
    </body>
</html>