即时搜索：对于ios自带输入法输入中文时多次触发input事件的处理

实现移动端的即时搜索的最佳方案，一定是使用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确定才触发

根据规范，Composition 事件触发顺序如下：

• 输入开始时触发 compositionstart
• 选择字/词完成输入时触发 compositionend
• 输入过程中每次击键时触发 compositionupdate，包括 start 事件以后立即触发，end 事件以前立即触发
• Composition 事件以后触发 input 事件

通过 Composition 事件，在 compositionend 里校验非直接输入，就能有效地避免不恰当的校验时机产生的用户体验问题。

 

原文链接：https://www.cnblogs.com/chaoyueqi/p/9166769.html

相关参考资料：https://csspod.com/dom-composition-event/

                         http://www.cnblogs.com/lonhon/p/7643095.html