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

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

5 人参与  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)
  • 赞助本站

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

最新文章

  • 繁花似锦不休每日分享(姜霁月封临川孟书晗)全书免费_(姜霁月封临川孟书晗)繁花似锦不休每日分享后续(姜霁月封临川孟书晗)
  • 老公劝我应聘妈妈岗,背地里却想抢我公司推文_老公高口碑_小说后续在线阅读_无删减免费完结_
  • 雾色靡靡全章+结局(倪雾裴淮聿)_雾色靡靡全章+结局
  • 雾色靡靡结局+番外+完结(倪雾裴淮聿)_雾色靡靡结局+番外+完结(倪雾裴淮聿)
  • (唐湉陈泽阳)唐湉陈泽阳(重生七零:硬汉红了眼只求她原谅)无套路无弹窗全部章节列表
  • 未婚夫让我替姐姐背黑锅,离开后他悔疯了(阮明珠傅知礼)全书免费_(阮明珠傅知礼)未婚夫让我替姐姐背黑锅,离开后他悔疯了后续(阮明珠傅知礼)
  • 替嫁娇妻侯爷别追了,我和小狼狗跑路了(陆燃顾云深林浅)全书免费_(陆燃顾云深林浅)替嫁娇妻侯爷别追了,我和小狼狗跑路了后续(陆燃顾云深林浅)
  • 回档99次后,我放弃攻略了免费赏析_沈故玉佩那苍州完结txt_小说后续在线阅读_无删减免费完结_
  • 京圈太子爷视我如命,一吻成瘾小说完结篇(宋皙顾黎商)章节前文+全篇阅读(京圈太子爷视我如命,一吻成瘾)最近更新
  • 小情歌秦歌(秦司廷时念歌)整本+后续+(小情歌秦歌)结局在线阅读
  • 她怀了保安的孩子却***一刀说是我的错最新目录_苏晚张强岳母超长版_小说后续在线阅读_无删减免费完结_
  • 季宴礼云岁晚无法言欲:+后续+番外+附加(无法言欲)清爽版阅读

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

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