IOS 自带输入法接收汉字触发事件

今天做了一个录入信息的，客户通过扫码跳转到信息录取界面，支持微信、浏览器扫码方式，录取有几个下拉框，下拉框支持模糊查询；安卓端模糊查询是正常的，但是ios端有一个现象，ios用自带的输入法时，输入汉字时，汉字还未出现，就会立即把汉字字母触发查询，其实这样也能接受，关键是选中汉字时事件就不触发了，这个就可悲了，通过网上搜索解决方法，现在给出解决方案：

代码：

     

//用于标记是否是输入的文字
var flag = false;
$('#id').on({
    'compositionstart': function() {
      flag = true;
    },
    'compositionend': function() {
      flag = false;
      if(!flag) {
        //do something...       
      }
    },
    'input propertychange': function() {
        if(!flag) {
          //do something...
        }
    }
});

 

• 实现原理：借助 compositionstart 和 compositionend 两个事件来作为一个开关，同时借助状态变量，只在文字输入结束之后再触发input事件
• 使用该方式处理之后，如果只是需要输入英文，那么需要点击enter确定才触发

 

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

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

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