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

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

大家好,又见面了,我是你们的朋友全栈君。

做限制输入框可输入最大的长度和实时匹配输入框数据时遇到了坑 —— 当中文输入时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('限制最大输入字符(截取)')
    })
  })
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/141895.html原文链接:https://javaforall.net

(0)
上一篇 2022年5月24日 下午9:00
下一篇 2022年5月24日 下午9:00


相关推荐

  • PyCharm 配置设置,激活,升级等

    PyCharm 配置设置,激活,升级等PyCharm 的初始设置目标恢复 PyCharm 的初始设置第一次启动 PyCharm 新建一个 Python 项目设置 PyCharm 的字体显示 PyCharm 的升级以及其他 PyCharm 的官方网站地址是 https www jetbrains com pycharm 01 恢复 PyCharm 的初始设置 PyCharm 的配置信息是保存在用户

    2026年3月27日
    1
  • 解决Ubuntu中Edge浏览器smartUp手势插件导致鼠标右键不灵敏的问题

    解决Ubuntu中Edge浏览器smartUp手势插件导致鼠标右键不灵敏的问题解决Ubuntu中Edge浏览器smartUp手势插件导致鼠标右键不灵敏的问题Edge浏览器正式版、Beta、Dev版本都存在smartUp手势插件导致鼠标右键不灵敏的问题解决方法Edge浏览器正式版、Beta、Dev版本都存在smartUp手势插件导致鼠标右键不灵敏的问题解决方法打开smartUp手势设置,或者直接在浏览器地址栏输入下面的地址extension://elponhbfjjjihgeijofonnflefhcbckp/html/options.html通用选项->Linux

    2022年7月21日
    14
  • dota2连接服务器没有响应,win10系统dota2无法与任何服务器建立连接的解决方法

    dota2连接服务器没有响应,win10系统dota2无法与任何服务器建立连接的解决方法很多小伙伴都遇到过win10系统dota2无法与任何服务器建立连接的情况,想必大家都遇到过win10系统dota2无法与任何服务器建立连接的情况吧,那么应该怎么处理win10系统dota2无法与任何服务器建立连接呢?我们依照1、按下windows+Q组合键打开搜索框,在搜索框中搜索cmd,在搜索结果中我们可以看到命令提示符在命令提示符选项上单击右键,选择【以管理员身份运行】;2、在命令…

    2022年5月13日
    97
  • python简单代码_gdal python

    python简单代码_gdal python目标:实现GBDT+LR模型代码,并比较和各种RF/XGBoost+LR模型的效果,发现GBDT+LR真心好用啊。内容:构造GBDT+LR步骤训练阶段:1、获取特性信息2、训练GBDT分类器3、遍历GBDT树的叶子节点,拼接成一个常常的一维向量4、训练OneHot编码器5、训练LR模型预测阶段:1、把带预测的特征输入到GBDT2、获得叶子节点,拼接成一个常常的一维向量3、获得OneHot向量4、LR预测结果这里发现了上篇文章的一个错误:就是GBDT树的叶子节点,输

    2022年10月10日
    5
  • 正式学习react(二)[通俗易懂]

    正式学习react(二)

    2022年2月22日
    44
  • 3D逼真!大模型 Nano Banana,最新“无限次数”教程来了~🧣

    3D逼真!大模型 Nano Banana,最新“无限次数”教程来了~🧣

    2026年3月13日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号