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

Posted 简简单单

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了即时搜索:对于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确定才触发

参考的原文出处:https://www.cnblogs.com/dubox/p/5997969.html

以上是关于即时搜索:对于ios自带输入法输入中文时多次触发input事件的处理的主要内容,如果未能解决你的问题,请参考以下文章

IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

input 输入框 propertychange

input 输入框 propertychange

是否有可能强制Ios浏览器从输入焦点到另一个元素?

input输入中文未完成时触发change事件

input事件中文触发多次问题研究