1. 程式人生 > >即時搜索:對於ios自帶輸入法輸入中文時多次觸發input事件的處理

即時搜索:對於ios自帶輸入法輸入中文時多次觸發input事件的處理

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事件的處理