中文輸入法不觸發onkeyup事件的解決辦法Script

時間 2020-07-11

標籤中文輸入法觸發 onkeyup 事件解決辦法 script 简体版

原文原文鏈接

中文輸入法不觸發onkeyup事件的解決辦法Scriptjavascript

摘要：這兩天作一個須要實時監控文本框輸入的功能,碰到了中文輸入法沒法觸發onkeyup事件的噁心問題。具體表現是這樣的:當監聽一個input的keyup的事件的時候,英文輸入法的狀況下能夠實時的經過keyup事件檢測到文本框value的變化,可是當輸入法變成中文後,input的keyup事件就不會被正常觸發。這是最早前的寫法。<html><head><scripttype="text/javascript"src="htt
這兩天作一個須要實時監控文本框輸入的功能,碰到了中文輸入法沒法觸發onkeyup事件的噁心問題。html

具體表現是這樣的:java

當監聽一個input的keyup的事件的時候,英文輸入法的狀況下能夠實時的經過keyup事件檢測到文本框value的變化,可是當輸入法變成中文後,input的keyup事件就不會被正常觸發。這是最早前的寫法。jquery
<html><head><script type="text/javascript" src="http://www.th7.cn/static/js/jquery-1.4.2.min.js"></script></head><body> 使用keyup事件檢測文本框內容: <input type="text" name="keyup_i" id="keyup_i" autocomplete="off"/> <span id="keyup_s"> <script type="text/javascript"> $('#keyup_i').bind('keyup', function(){ $('#keyup_s').text($(this).val()); }) </script> </body></html>
如你所見,這樣的寫法遇到了中文不能觸發keyup事件的問題。因而尋求解決方法,想起來baidu的搜索欄提示彷佛是沒有這個問題的,因而開始看百度的js。百度的js比較難看...方法命名淨是一個字母,最後發現大概是使用了timeout作一個定時器來定時監測input框的修改。不是很滿意這樣的方法。因而繼續查找看有沒有更好的解決辦法,因而就找到了oninput和onpropertychange兩個事件。瀏覽器

oninput是firefox下面可用,而onpropertychange則是ie下可用。兩個方法有着一些區別。this

oninput只能檢測到value這個屬性的變化,而onpropertychange則能夠檢測到包含value的全部屬性的變化。因而開始改爲這個樣子。spa
<html><head><script type="text/javascript" src="http://www.th7.cn/static/js/jquery-1.4.2.min.js"></script></head><body> 使用oninput以及onpropertychange事件檢測文本框內容: <input type="text" name="inputorp_i" id="inputorp_i" autocomplete="off"/> <span id="inputorp_s"> <script type="text/javascript"> //先判斷瀏覽器是否是萬惡的IE,沒辦法,寫的東西也有IE使用者 var bind_name = 'input'; if (navigator.userAgent.indexOf("MSIE") != -1){ bind_name = 'propertychange'; } $('#inputorp_i').bind(bind_name, function(){ $('#inputorp_s').text($(this).val()); }) </script> </body></html>
問題這麼被解決了。firefox

中文輸入法不觸發onkeyup事件的解決辦法Script3d

的內容，更多

中文輸入法英文輸入法文本框監控檢測 code

的內容，請您使用右上方搜索功能獲取相關信息。

轉載自：https://www.aliyun.com/jiaocheng/1076282.html

還有一個比較詳細的講解：

https://www.cnblogs.com/owenChen/p/3215421.html

這我的總結了一下，仍是能夠做爲參考的。

以前的只是解決了keyup的問題。可是中文輸入法的問題仍是沒解決。。。

中文輸入法的問題這樣解決：

問題描述：

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

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

解決辦法：

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

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

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

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

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

我的理解：

　　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>

效果圖：

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

轉載自：https://www.cnblogs.com/lonhon/p/7643095.html