最近要在移動端實現一個文本框實時搜索的功能,即在文本框里每輸入一個字,就向服務器請求一次搜索結果。暫且不考慮性能優化問題,第一時間想到的是用keyup
實現:
$('input').on('keyup',function() { AjaxRequest(); });
這在安卓上沒有問題,但在iOS上如果使用中文輸入或者輸入法的預設文本,就不會觸發keyup
事件,因此也就無法和服務器通信。為解決這個問題,在網上查了些資料,HTML5有專門處理的事件oninput
,可以響應實時輸入:
$('input').on('input',function() { AjaxRequest(); });
這樣在輸入中文時就能監聽到文本框的變化了。但還是有問題,在輸入中文時,比如“我”字,拼音是“wo”,五筆是"q",均會向服務器發送三次請求,如果打印出來,會得到“我”、“”、“我”三個值,可我只想在“我”字輸出到文本框以后再發請求,這時候就需要一個專門的compositionstart
和compositionend
事件來處理這種情況,這是參考資料。
“compositionstart
事件觸發於一段文字的輸入之前(類似於 keydown
事件,但是該事件僅在若干可見字符的輸入之前,而這些可見字符的輸入可能需要一連串的鍵盤操作、語音識別或者點擊輸入法的備選詞)。“
最后,完整代碼如下:
var lock = false; $('input').on({ input: function() { if(!lock) AjaxRequest(); //這里再調用一次方法是為了響應退格刪除中文 }, compositionstart: function() { lock = true; }, compositionend: function() { lock = false; AjaxRequest(); //可以響應正常中文輸入,但不響應使用退格刪除中文 } });