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

问题描述

这个问题可能是因为在index.php/tags-602.html" >使用中文输入法输入时，当你还在输入过程中（还未选择和确定最终的汉字词组）就会触发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中设置全局变量flagconsole.log(e);}}, 200)}},