输入一个字符触发三次input事件，你不知道的JavaScript composition Event

最新推荐文章于 2024-01-25 09:47:55 发布
最新推荐文章于 2024-01-25 09:47:55 发布
阅读量2k 收藏 2
点赞数
分类专栏： 前端笔记 文章标签： html javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46115413/article/details/116916349
版权

情景描述

  在做项目时第三方接口返回内容为按某固定分割符拼接的一个长的字符串，需要自己拆分每一项。正好最近在学Vue3，为了方便看每项内容打算写个拆分的前端脚本。

事件描述

  脚本打算不使用确定按钮完成拆分，用input事件完成自动拆分。在测试input事件的时候，突然发现一个神奇的现象。输入一个数字1结果调用了三次方法，当时整个人都懵了。发生了什么？？？
问题现象
问题现象

问题描述

  为了解决这一问题各种上网搜索办法，又各种测试，最后发现问题：我用了中文输入法，切换到英文输入法就不会这样。然后又是一脸懵，这和中英文输入法有关系？？？这算是我这个小脚本的bug了，得治，继续上网搜。

解决问题

 

最低0.47元/天 解锁文章
Z Joker
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
09-05
做一个输入框的字符统计，限制输入字符数量， 即在输入框的内容发生变化的时候改统计字符长度。 跟新浪微博一样，统计字符数量，不超过140字
input事件中文触发多次问题研究
weixin_34198797的博客
02-02 2697
我们在网页中经常会遇到实时搜索的情况，或者其他类似需要input实时响应的问题，一般情况下，我们是利用input和propertychange事件来监听input内容的变化来响应，但是有一个问题就是当输入汉字的时候，可能我们要输入 ‘实时’ 的时候，我们的input框中会出现 'shishi'直到我们的空格才会变成 '实时',这也就意味着...
中文输入状态下，造成多次触发input事件修改值出现问题
weixin_50622621的博客
12-19 145
【代码】中文输入状态下，多次触发input事件，照成多次watch监听输出。
在js中去控制input事件的触发次数
HVENLY的博客
06-02 360
通过代码控制，在不影响用户体验的前提下去降低input输入框的input事件的触发频率
关于input的change事件触发多次发解决
相当rapper的程序员
11-02 1478
$(“122”).off(‘change’,’#logo_name’).on(‘change’,’#logo_name’,function(){ alert(“ok”); }) 这个问题并不是由change事件失效造成的，而是ajaxFileUpload插件造成的，它会把原来的file元素替换成新的file元素，所以之前绑定的change事件就失效了，需要重新绑定一下，解决办法是再再次绑定之前先移除绑定再重新绑定 ...
JavaScript实现找出字符串中第一个不重复的字符
10-25
主要介绍了JavaScript实现找出字符串中第一个不重复的字符的方法,需要的朋友可以参考下
JavaScript实现替换字符串中最后一个字符的方法
10-20
在JavaScript编程中，有时我们需要对字符...了解这些知识点后，你可以根据项目需求灵活地替换字符串中的最后一个字符。在实际应用中，可能还需要考虑更多的边界情况，如非数字输入、空字符串等情况，确保代码的健壮性。
input 禁止输入特殊字符的四种实现方式
11-24
昨天项目搜索的时候报错，蛋疼的是生产库中的，看了下日志，原因是用户搜索的时候输入了...下面一起探讨下input禁止输入特殊字符的方式： 方式一：拿到value值以后 在你传递之前处理 function stripscript(value) { va
5个你不知道的JavaScript字符串处理库(小结)
10-15
主要介绍了5个你不知道的JavaScript字符串处理库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js限制input只能输入有效的数字(第一个不能是小数点)
12-11
第一种方法：通过字符搜索判断等实现，适合功能增强 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> [removed][removed] </...
输入框input事件compositionstart和compositionend的妙用
EmotionComputer
07-05 1039
input提供了compositionstart和compositionend两个事件，以上解决思路其实来源于vue源码v-model的指令实现的时候对输入框事件做了的处理。由此看出鱿大大，在写vue框架的时候是多么细心，这些细节都考虑到了。这样带来的一个问题就是在输入中文的过程中输入框可能会抖动，这样就完全解决了中文输入的时候输入框问题。
解决输入法在中文状态时input标签的input事件会触发多次的问题
我的博客
07-01 1802
解决输入法在中文状态时input标签的input事件会触发多次的问题
【h5】ios自带输入法输入中文时多次触发input事件的处理
韩旭不会敲代码吧的博客
12-05 1215
ios自带输入法输入中文时多次触发input事件的处理
JS鼠标3次点击事件实现及扩展思路
xiazhiqiang01的博客
09-13 5218
这几天看了一下JavaScript高级程序设计中的Dom事件相关内容，同时看到网上有关鼠标多次点击事件，鼠标事件是简单、常用的事件之一，于是便针对点击事件进行一些小的扩展和实现，增强对Dom事件的进一步理解。其中的实现和思路是自己总结的，有什么不对的地方还请大神们交流指正。 1、制作一个通用的事件处理模块（原生实现） 以下实现基于AMD定义模块方式： /** * 浏览器兼容事件处理
输入框的三种触发事件
头发丝儿还在的博客
11-19 5738
输入框的几种触发事件对比
jquery 文件上传 触发两次_点击三次input按钮,前两次不选择任何文件，第三次选择一个文件，结果上传了3个文件，即发生了三次请求...
weixin_42250528的博客
01-17 421
点击三次input按钮,前两次不选择任何文件，第三次选择一个文件，结果页面上出现了3个文件，也就是上传了3个文件我点击input，不选择任何文件，然后取消文件选择器的窗口，然后第二次次点击input，同样不选择文件然后关闭，第三次点击input选择一个文件，结果页面上出现了三个个文件，且三个文件相同就是说我点击三次input，前两次不选择任何文件，第三次选择一个文件上传，结果是上传了3个文件。这是...
处理打拼音时触发input事件bug
weixin_30663471的博客
07-31 247
1 　　　　 /* 处理预输入，例如输入中文汉字时，拼音的预加载不触发输入事件*/ 2 var cpLock = false; 3 /* 添加搜索延迟*/ 4 var timeoutId = 0; 5 6 /* 重写查询事件，当输入框为空或者查询数据为空时面板回收，否则面板显示查询数据*/ ...
前端input输入框，@input事件输入中文触发两次——解决方案
最新发布
2301_78055266的博客
01-25 1137
这样就可以避免在输入中文时input事件被连续触发两次的问题。这个问题可能是因为在使用中文输入法输入时，当你还在输入过程中（还未选择和确定最终的汉字词组）就会触发input事件，也就是说在你输入拼音的过程中就已经触发了input事件，等你选择了正确的汉字之后，又会再次触发input事件。这样就会造成在中文输入过程中，input事件触发两次的现象。这样一来，我们就能确保在拼音输入过程中，input事件只在输入完成后被触发一次。这两个事件来限制input事件的触发。比较有效的解决办法是使用。
python input输入一个字符串
03-26
Python中可以使用input()函数从控制台输入一个字符串，例如： ```python name = input("请输⼊您的姓名：") print("您好，" + name + "！") ``` 在执行该程序时，会在控制台上提示用户输入姓名，用户输入后，程序将输出一句问候语。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值