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

问题描述

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

解决办法

方式一：
比较有效的解决办法是使用

compositionstart

和

compositionend

这两个事件来限制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中设置全局变量flag
                console.log(e);}},200)}},