美文网首页
阻止中文输入时触发input事件

阻止中文输入时触发input事件

作者: 格桑Hilton | 来源:发表于2018-04-20 11:29 被阅读0次

    做限制输入框可输入最大的长度和实时匹配输入框数据时遇到了坑 —— 当中文输入时input事件也会被触发,即假设限制的是2个字符,你要输入社会人的“社(she)”,就会直接被截取,输入框填充文本sh。或者是在中文输入法时也会一直去调接口,匹配数据,影响了页面的性能!代码如下:

    $(document).on('input','input',function(){
      console.log('限制最大输入字符(截取)')
    })
    

    这个问题,可以声明一个inputFlag,使用compositionstart,compositionend配合解决,代码如下:

    var inputFlag = true
    $(document).on('compositionstart', 'input',function () {
      inputFlag = true
    }).on('compositionend','input',function () {
      inputFlag = false
    }).on('input','input', function () {
      //定时器内才会生效 注意:定时器内this指向已发生改变
      setTimeout(function(){
        if (inputFlag == false) return   // 中文输入过程中不截断
          console.log('限制最大输入字符(截取)')
        })
      })
    

    相关文章

      网友评论

          本文标题:阻止中文输入时触发input事件

          本文链接:https://www.haomeiwen.com/subject/evdakftx.html