问题描述

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

解决办法

方式一：

比较有效的解决办法是使用<code>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)

}

},