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

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

情景描述

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

事件描述

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

问题描述

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

解决问题

  经过查阅资料，了解到如下几个事件compositionstart，compositionupdate ，compositionend。

  1.compositionstart：文本合成系统如 input method editor（即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件（摘自MDN

最低0.47元/天 解锁文章
Z Joker
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
09-05
做一个输入框的字符统计，限制输入字符数量， 即在输入框的内容发生变化的时候改统计字符长度。 跟新浪微博一样，统计字符数量，不超过140字
关于input的change事件触发多次发解决
相当rapper的程序员
11-02 1490
$(“122”).off(‘change’,’#logo_name’).on(‘change’,’#logo_name’,function(){ alert(“ok”); }) 这个问题并不是由change事件失效造成的，而是ajaxFileUpload插件造成的，它会把原来的file元素替换成新的file元素，所以之前绑定的change事件就失效了，需要重新绑定一下，解决办法是再再次绑定之前先移除绑定再重新绑定 ...
input事件中文触发多次问题研究
weixin_34198797的博客
02-02 2704
我们在网页中经常会遇到实时搜索的情况，或者其他类似需要input实时响应的问题，一般情况下，我们是利用input和propertychange事件来监听input内容的变化来响应，但是有一个问题就是当输入汉字的时候，可能我们要输入 ‘实时’ 的时候，我们的input框中会出现 'shishi'直到我们的空格才会变成 '实时',这也就意味着...
在js中去控制input事件的触发次数
HVENLY的博客
06-02 386
通过代码控制，在不影响用户体验的前提下去降低input输入框的input事件的触发频率
中文输入状态下，造成多次触发input事件修改值出现问题
weixin_50622621的博客
12-19 153
【代码】中文输入状态下，多次触发input事件，照成多次watch监听输出。
输入框input事件compositionstart和compositionend的妙用
EmotionComputer
07-05 1171
input提供了compositionstart和compositionend两个事件，以上解决思路其实来源于vue源码v-model的指令实现的时候对输入框事件做了的处理。由此看出鱿大大，在写vue框架的时候是多么细心，这些细节都考虑到了。这样带来的一个问题就是在输入中文的过程中输入框可能会抖动，这样就完全解决了中文输入的时候输入框问题。
jquery实现input输入框实时输入触发事件代码
12-04
这里监听两个事件：`input` 和 `propertychange`。`input` 事件在用户修改输入框内容时触发，对于现代浏览器，这是实时输入事件的标准方式。`propertychange` 事件则主要为旧版 IE 浏览器提供兼容性，当输入框的任何...
JavaScript实现替换字符串中最后一个字符的方法
10-20
在JavaScript编程中，有时我们需要对字符...了解这些知识点后，你可以根据项目需求灵活地替换字符串中的最后一个字符。在实际应用中，可能还需要考虑更多的边界情况，如非数字输入、空字符串等情况，确保代码的健壮性。
input标签内容改变的触发事件介绍
09-04
本文将详细介绍`onchange`、`onpropertychange`以及`oninput`这三个事件，并分析它们之间的区别和应用场景。 1. `onchange`事件： `onchange`事件是在`input`标签的值发生改变，并且用户将焦点从当前输入框移开...
js限制input只能输入有效的数字(第一个不能是小数点)
12-11
第一种方法：通过字符搜索判断等实现，适合功能增强 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> [removed][removed] </...
解决输入法在中文状态时input标签的input事件会触发多次的问题
我的博客
07-01 1823
解决输入法在中文状态时input标签的input事件会触发多次的问题
【h5】ios自带输入法输入中文时多次触发input事件的处理
韩旭不会敲代码吧的博客
12-05 1255
ios自带输入法输入中文时多次触发input事件的处理
jquery 文件上传 触发两次_点击三次input按钮,前两次不选择任何文件，第三次选择一个文件，结果上传了3个文件，即发生了三次请求...
weixin_42250528的博客
01-17 431
点击三次input按钮,前两次不选择任何文件，第三次选择一个文件，结果页面上出现了3个文件，也就是上传了3个文件我点击input，不选择任何文件，然后取消文件选择器的窗口，然后第二次次点击input，同样不选择文件然后关闭，第三次点击input选择一个文件，结果页面上出现了三个个文件，且三个文件相同就是说我点击三次input，前两次不选择任何文件，第三次选择一个文件上传，结果是上传了3个文件。这是...
JS鼠标3次点击事件实现及扩展思路
xiazhiqiang01的博客
09-13 5228
这几天看了一下JavaScript高级程序设计中的Dom事件相关内容，同时看到网上有关鼠标多次点击事件，鼠标事件是简单、常用的事件之一，于是便针对点击事件进行一些小的扩展和实现，增强对Dom事件的进一步理解。其中的实现和思路是自己总结的，有什么不对的地方还请大神们交流指正。 1、制作一个通用的事件处理模块（原生实现） 以下实现基于AMD定义模块方式： /** * 浏览器兼容事件处理
输入框的三种触发事件
头发丝儿还在的博客
11-19 5871
输入框的几种触发事件对比
处理打拼音时触发input事件bug
weixin_30663471的博客
07-31 251
1 　　　　 /* 处理预输入，例如输入中文汉字时，拼音的预加载不触发输入事件*/ 2 var cpLock = false; 3 /* 添加搜索延迟*/ 4 var timeoutId = 0; 5 6 /* 重写查询事件，当输入框为空或者查询数据为空时面板回收，否则面板显示查询数据*/ ...
前端input输入框，@input事件输入中文触发两次——解决方案
最新发布
2301_78055266的博客
01-25 1315
这样就可以避免在输入中文时input事件被连续触发两次的问题。这个问题可能是因为在使用中文输入法输入时，当你还在输入过程中（还未选择和确定最终的汉字词组）就会触发input事件，也就是说在你输入拼音的过程中就已经触发了input事件，等你选择了正确的汉字之后，又会再次触发input事件。这样就会造成在中文输入过程中，input事件触发两次的现象。这样一来，我们就能确保在拼音输入过程中，input事件只在输入完成后被触发一次。这两个事件来限制input事件的触发。比较有效的解决办法是使用。
你知道Compositionstart和Compositionend事件吗，react 组件库之Input组件的坑
梅花寺
02-10 1062
Input组件大家都用过，是吧，但是你有没有想过这样一个场景，如下图，我正在搜索数据你组件上注册了onChange事件，然后边输入，底下会显示你搜索相关的内容，但是有一个问题就是，输入中文的时候，你比如打三国的三字，要先输入san然后才出现三可问题来了，onChange事件监听的是san，已经开始搜索了，其实我们根本不想这样，我们想的是中文的话，等中文显示在输入框，也就是输入完“三”这个字的时候，才搜索。这个咋办。
javascript 中文输入法下的input、compositionstart与compositionend，实现中文输入法下，仅在选词后触发input事件
paipaicui的博客
08-04 1620
关键 compositionstart事件 compositionend事件
input输入框停止输入后触发事件
09-08
input输入框停止输入后触发事件可以通过监听input元素的input事件来实现。当用户在input输入框中输入文字时，每输入一个字符都会触发一次input事件。我们可以通过设置一个计时器，在用户停止输入一段时间后触发所需的事件。 具体的实现步骤如下： 1. 监听输入框的input事件，当该事件被触发时，执行相应的处理函数。 2. 在处理函数中，首先清除之前设置的计时器（如果有），然后设置一个新的计时器。 3. 在计时器的回调函数中执行需要触发的事件。在这个例子中，我们可以弹出一个提示框作为示例。 下面是一个简单的实现示例： ```html <!DOCTYPE html> <html> <head> <title>Input Stop Event</title> </head> <body> <input id="myInput" type="text" /> <script> let timer; const inputElement = document.getElementById('myInput'); inputElement.addEventListener('input', function() { clearTimeout(timer); // 清除计时器 timer = setTimeout(() => { alert('输入停止！'); // 在用户停止输入0.5秒后触发事件 }, 500); }); </script> </body> </html> ``` 在以上示例中，我们监听了id为"myInput"的input元素的input事件，并在事件处理函数中设置了一个计时器。当用户输入文字时，每次input事件被触发时，都会清除之前设置的计时器，并重新设置一个新的计时器。当用户停止输入0.5秒后，计时器的回调函数会被执行，触发一个提示框弹出，表示输入已经停止。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值