当前位置:首页 » 《休闲阅读》 » 正文

前端input输入框,@input事件输入中文触发两次——解决方案

11 人参与  2024年04月26日 08:44  分类 : 《休闲阅读》  评论

点击全文阅读


问题描述

这个问题可能是因为在使用中文输入法输入时,当你还在输入过程中(还未选择和确定最终的汉字词组)就会触发input事件,也就是说在你输入拼音的过程中就已经触发了input事件,等你选择了正确的汉字之后,又会再次触发input事件。这样就会造成在中文输入过程中,input事件触发两次的现象。

解决办法

方式一:
比较有效的解决办法是使用compositionstartcompositionend这两个事件来限制input事件的触发。

compositionstart事件在你开始一个新的复合输入,即开始输入拼音时就会触发。compositionend事件在你结束复合输入,即你选择了正确的汉字并将其输入到文本框后触发。

你可以在compositionstart事件开始时设定一个标志位,然后在input事件中先判断这个标志位,如果标志位为真(表示正在进行复合输入,即拼音输入过程中),则不处理input事件,等到compositionend事件发生时(表示完成了拼音输入,已经确定了要输入的汉字),再处理input事件。这样就可以避免在输入中文时input事件被连续触发两次的问题。

案例如下:

//首先,我们设置一个全局变量isTypingPinyin用来判断当前是否在进行拼音输入。let isTypingPinyin = false;//然后,我们可以在input标签的compositionstart和compositionend事件上进行监听,以便知道什么时候开始和结束拼音输入。document.getElementById('myInput').addEventListener('compositionstart', () => {//在compositionstart事件触发时,即在拼音输入开始时,我们把isTypingPinyin设置为true;    isTypingPinyin = true;});document.getElementById('myInput').addEventListener('compositionend', () => {//在compositionend事件触发时,即在拼音输入结束时,我们把isTypingPinyin设置为false。    isTypingPinyin = false;});//最后,我们可以在input标签的input事件上做一次判断,如果isTypingPinyin为true,即当前正在进行拼音输入,那么就不处理这次input事件;如果isTypingPinyin为false,那么就说明输入已经结束,可以处理这次input事件。document.getElementById('myInput').addEventListener('input', () => {  if (!isTypingPinyin) {    // Handle the input event    console.log('文本已更新');  }});

这样一来,我们就能确保在拼音输入过程中,input事件只在输入完成后被触发一次。
方式二:
方式二是我自己想出的办法,实测也可以解决,原理也比较简单

input(e) {if(e){var _this = this;setTimeout(() => {if(_this.flag){_this.flag=false;//在data中设置全局变量flagconsole.log(e);}}, 200)}},

点击全文阅读


本文链接:http://m.zhangshiyu.com/post/100307.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 陈春花,池言(重生后,摆脱吸血鬼老公一家)前文+全本完整阅读预售作品抢先看
  • 错认皇太女后,三个皇夫悔疯了后续结局_春桃长青魏昭看点十足_小说后续在线阅读_无删减免费完结_
  • (重生后,恶毒女配拿稳白月光剧本)江朝华燕景最终篇章(江朝华燕景)全书在线无广告高口碑小说
  • 女儿遇险命悬一线,我却见死不救后续+完结_小姑娘雷达安静读者推荐_小说后续在线阅读_无删减免费完结_
  • 黎夏林意深:结局+番外新上热文新章速递京港缠绵,他独宠娇梅:结局+番外评价五颗星
  • 陈春花,池言小说全文免费阅读(重生后,摆脱吸血鬼老公一家)全文免费阅读无弹窗_陈春花,池言小说全文免费阅读_笔趣阁
  • 女帝采补八百年:出世无敌怎么了?隐藏剧情_苏玄沐禹竹最新阅读_小说后续在线阅读_无删减免费完结_
  • 最新章节(重生后,恶毒女配拿稳白月光剧本)江朝华燕景:结局+番外精品选集附加章节列表
  • 云舒霍骞小说章节目录+章节前文(乡下真千金,带飞全国不装了)TXT清爽版在线
  • 陆晏周岁岁七零:首长娶了全村最懒的婆娘后续(陆晏周岁岁)(七零:首长娶了全村最懒的婆娘)完整章节列表_笔趣阁
  • 毕业告别旅⾏高分言情_姜雪高中毕业白月光每日分享_小说后续在线阅读_无删减免费完结_
  • 甄灵殷温州续集(甄灵殷温州)章节前文+全书阅读(甄灵殷温州)最新连载

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1