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


相关推荐

  • The forked VM terminated without saying properly goodbye

    The forked VM terminated without saying properly goodbye[INFO] BUILD FAILURE[INFO] ————————————————————————[INFO] Total time: 36.927 s[INFO] Finished at: 2016-12-14T15:13:37+08:00[INFO] Final Memory: 48M/

    2022年6月17日
    43
  • Dubbo入门_dubbo的原理

    Dubbo入门_dubbo的原理dubbo分布式系统简介发展演变RPCdubbo核心概念搭建dubbo分布式系统简介“分布式系统是若干独立计算机的集合,这些计算机对于用户来说就像单个相关系统”分布式系统(distributed system)是建立在网络之上的软件系统。随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进。发展演变单一应用架构当网站流量很小时,只需一个应用,将所有功能都部署在一起,以减少部署节点和成本。此时

    2022年8月8日
    8
  • JSP对象和JavaBean

    JSP对象和JavaBean1.JSP 客户端请求当浏览器请求一个网页时,它会向网络服务器发送一系列不能被直接读取的信息,因为这些信息是作为HTTP信息头的一部分来传送的,如下图所示:Http请求头对应的内容如下

    2022年6月30日
    23
  • 创建UFT对象

    创建UFT对象小船UFT总结:VBS创建UFT对象: SetqtApp=CreateObject(“QuickTest.Application”)    ‘创建COM对象qtApp.Launch                                                                     ‘启动UFTqtApp.New

    2022年5月28日
    36
  • Pytest(16)随机执行测试用例pytest-random-order

    Pytest(16)随机执行测试用例pytest-random-order前言通常我们认为每个测试用例都是相互独立的,因此需要保证测试结果不依赖于测试顺序,以不同的顺序运行测试用例,可以得到相同的结果。pytest默认运行用例的顺序是按模块和用例命名的ASCII编码

    2022年7月30日
    9
  • linux使用ps命令查看和控制进程_ps grep 进程

    linux使用ps命令查看和控制进程_ps grep 进程ps命令Linuxps(英文全拼:processstatus)命令用于显示当前进程的状态,类似于windows的任务管理器查看所有进程ps-A显示所有进程信息,连同命令行ps-

    2022年7月29日
    10

发表回复

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

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