Vue.js + Android虚拟键盘问题：v-model绑定模型未同步最后输入内容

我之前也碰到过一模一样的问题，这其实是Android系统输入法的IME（Input Method Editor）机制搞的鬼：当输入法开启自动联想时，它不会把用户正在输入的内容实时同步给网页，而是暂时把内容保留在输入法内部，直到用户按下空格、选中联想词或者完成输入动作，才会一次性提交内容。这就导致Vue的@input事件没法及时触发，val变量没法实时更新，甚至会出现最后输入的单词丢失的情况。

问题复现的完整代码 #

先把你的代码整理成可直接运行的示例：

<div id="app"></div>
<script type="text/x-template" id="template">
  <div>
    <textarea v-model='val' @input='test'></textarea>
    <div>实时显示：{{val}}</div>
    <div>输入日志：{{log}}</div>
  </div>
</script>
<script>
var app = new Vue({
  el: "#app",
  template: "#template",
  data: {
    val:"",
    log:""
  },
  methods: {
    test() {
      this.log += "."
    }
  }
});
</script>

解决方案：监听输入法组合事件 #

我们可以通过compositionstart和compositionend这两个事件判断用户是否处于输入法联想状态，然后在合适的时机手动同步数据：

修改后的代码如下：

<div id="app"></div>
<script type="text/x-template" id="template">
  <div>
    <textarea 
      v-model='val' 
      @input='test'
      @compositionstart='onCompositionStart'
      @compositionend='onCompositionEnd'
      ref="textarea"
    ></textarea>
    <div>实时显示：{{val}}</div>
    <div>输入日志：{{log}}</div>
  </div>
</script>
<script>
var app = new Vue({
  el: "#app",
  template: "#template",
  data: {
    val:"",
    log:"",
    isComposing: false // 标记是否处于输入法联想状态
  },
  methods: {
    test() {
      // 非联想状态下才更新日志，避免重复触发
      if (!this.isComposing) {
        this.log += "."
      }
    },
    onCompositionStart() {
      this.isComposing = true
    },
    onCompositionEnd() {
      this.isComposing = false
      // 联想结束后手动同步真实输入值，确保val完全匹配
      this.val = this.$refs.textarea.value
      this.test()
    }
  }
});
</script>

原理说明 #

• compositionstart：当用户开始使用输入法联想输入时触发，我们把isComposing设为true，此时忽略input事件的重复触发。
• compositionend：当用户结束联想（选中联想词、按空格等）时触发，我们把isComposing设为false，然后手动同步textarea的真实内容到val变量，再触发一次日志更新。

这样就能保证在Android设备上，无论输入法是否开启联想，val变量都能准确同步输入内容，不会出现延迟更新或内容丢失的问题。

内容的提问来源于stack exchange，提问作者Moshe L