iOS中文輸入法多次觸發的問題及解決方案


  最近要在移動端實現一個文本框實時搜索的功能,即在文本框里每輸入一個字,就向服務器請求一次搜索結果。暫且不考慮性能優化問題,第一時間想到的是用keyup實現:

$('input').on('keyup',function() {
    AjaxRequest();
});

這在安卓上沒有問題,但在iOS上如果使用中文輸入或者輸入法的預設文本,就不會觸發keyup事件,因此也就無法和服務器通信。為解決這個問題,在網上查了些資料,HTML5有專門處理的事件oninput,可以響應實時輸入:

$('input').on('input',function() {
    AjaxRequest();
});

這樣在輸入中文時就能監聽到文本框的變化了。但還是有問題,在輸入中文時,比如“我”字,拼音是“wo”,五筆是"q",均會向服務器發送三次請求,如果打印出來,會得到“我”、“”、“我”三個值,可我只想在“我”字輸出到文本框以后再發請求,這時候就需要一個專門的compositionstartcompositionend事件來處理這種情況,這是參考資料

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

最后,完整代碼如下:

var lock = false;
$('input').on({
    input: function() {
        if(!lock) AjaxRequest(); //這里再調用一次方法是為了響應退格刪除中文
    },
    compositionstart: function() {
        lock = true;
    },
    compositionend: function() {
        lock = false;     
        AjaxRequest(); //可以響應正常中文輸入,但不響應使用退格刪除中文
    }
});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM