即時搜索:對於ios自帶輸入法輸入中文時多次觸發input事件的處理
阿新 • • 發佈:2018-06-12
rip input事件 由於 了解 end 處理 移動 ref 使用
實現移動端的即時搜索的最佳方案,一定是使用input propertychange事件了,但是在ios設備上遇到了問題,使用ios自帶輸入法輸入漢字時,會出現多次觸發input事件的情況,一開始可能由於搜索的關鍵字不得法,沒有即時找到合適的方案,後來終於在網上找到了解決方案,現記錄如下:
代碼實現
/**
* @param flag: 用於標記是否是非直接的文字輸入
*/
var flag = false;
$(‘#id‘).on({
‘compositionstart‘: function() {
flag = true;
},
‘compositionend‘ : function() {
flag = false;
if(!flag) {
//do something...
doSomethingFunction();
}
},
‘input propertychange‘: function() {
if(!flag) {
//do something...
doSomethingFunction();
}
}
});
- 實現原理:借助 compositionstart 和 compositionend 兩個事件來作為一個開關,同時借助狀態變量,只在文字輸入結束之後再觸發input事件
- 使用該方式處理之後,如果只是需要輸入英文,那麽需要點擊enter確定才觸發
參考的原文出處:https://www.cnblogs.com/dubox/p/5997969.html
即時搜索:對於ios自帶輸入法輸入中文時多次觸發input事件的處理