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 里校验非直接输入,就能有效地避免不恰当的校验时机产生的用户体验问题。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值