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

格桑Hilton

于 2018-04-20 14:29:32 发布

阅读量2.1k

点赞数

分类专栏： bug修复文章标签： input compositionstart compositionend

本文链接：https://blog.youkuaiyun.com/qq_42023877/article/details/80018279

版权

bug修复专栏收录该内容

6 篇文章

订阅专栏

在限制输入框长度或实时匹配输入时，中文输入会意外触发input事件，导致输入异常或性能下降。通过设置inputFlag，并结合compositionstart和compositionend事件，可以有效解决这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做限制输入框可输入最大的长度和实时匹配输入框数据时遇到了坑 —— 当中文输入时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('限制最大输入字符（截取）')
    })
  })