阻止中文输入时触发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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • FastAI 课程学习笔记 lesson 1:宠物图片分类

    FastAI 课程学习笔记 lesson 1:宠物图片分类文章目录代码解析神奇的”%”导入fastAI库下载解压数据集untar_data获取帮助文档help()???doc设置路径get_image_filesImageDataBunchfrom_name_regrep命令检验正则表达式pythonre检验正则表达式代码解析神奇的”%”%reload_extautoreload%autoreload2%matplotlibinli…

    2022年9月8日
    2
  • java手机编程软件_手机java编程软件下载[通俗易懂]

    java手机编程软件_手机java编程软件下载[通俗易懂]手机java编程软件安卓版是一款专为java开发人员服务的编辑客户端应用,利用手机java编程软件手机安卓版实时进行相关编辑还能进行简单的编译,运行单个小程序等,提供您的效率。功能介绍手机java编程软件安卓版是一款将openjdk中关于编译java工程的代码移植到了安卓平台。手机java编程软件手机安卓版支持添加jar格式的lib文件,并且将编译后的程序dex化,以便在安卓设备上运行。在编译和运…

    2022年7月21日
    16
  • CentOS 7 修改IP地址

    网卡的命名规则CENTOS6的网卡命名方式:它会根据情况有所改变而非唯一且固定,在CENTOS6之前,网络接口使用连续号码命名:eth0、eth1等,当增加或删除网卡时,名称可能会发生变化。CENTOS7采用dmidecode采集命名方案,以此来得到主板信息;它可以实现网卡名字永久唯一化。(dmidecode这个命令可以采集有关硬件方面的信息)对网络设备的命名方式:1)如果Firmware(固件)或BIOS为主板上集成的设备提供的索引信息可用,且可预测则根据此索引进行命名,例如:ifcfg-e

    2022年4月7日
    298
  • C++:set、map的使用及其特性和区别

    C++:set、map的使用及其特性和区别set、map的使用及其特性和区别STL总共实现了两种不同结构的管理式容器:树型结构与哈希结构。树型结构的关联式容器主要有四种:set,map,multiset,multimap。下面介绍一下这四种容器的简单使用。1.setset里面每个元素只存有一个key值,它支持高效的关键字查询操作,比如检查一个关键字是否在set中。如果这个key值之前存在的话就不插入。简单使用如下:插入:set…

    2025年8月27日
    6
  • HTML自我介绍表格代码制作[通俗易懂]

    HTML自我介绍表格代码制作[通俗易懂]<html><head><title>张三</title><matename=”keywords”content=”个人简历”/><matename=”description”content=”张三的个人简历”/></head><body><tableborder=5bordercolor=redalign=center><trheight=70bgcol.

    2022年8月11日
    4
  • winform tablelayoutpanel_idea checkout

    winform tablelayoutpanel_idea checkoutWebGridHelperwithCheckAllCheckboxesTuesday,September13,2011ASP.NETASP.NETMVCHtmlHelperjQueryWebMatrixIntroduction:WebGridhelperisoneofthehelperofASP.NETWebPages(We…

    2022年10月5日
    2

发表回复

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

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