使用中文输入法时监听input长度产生错误的解决办法

项目场景：

有天在做个人博客时，编辑文章的标题部分想copy一下CSND的处理，后面加个字数统计（因为经常用看习惯了哈哈）。实现方法很简单，监听一下input事件，拿value的长度渲染出来。

---

问题描述：

结果发现使用中文输入法时出现了问题，打出来的拼音还没有按确定，但已经被算进value的长度了。

---

解决方案：

上网搜了一下，原来input有事件是可以监听到输入法的

compositionstart和compositionend用来监听输入法的开始与结束。

方法找到了，问题就很好解决了，我们设置一个变量来保存输入法开始与结束的状态，然后在input里判断就好了，直接贴代码：

HTML:

<div class="header-input">
  <span>文章标题：</span>
  <div>
    <input 
      v-model="articleInfo.title" 
      maxlength="100" 
      @input="titleChange" 
      @compositionstart="onCompositionStart"
      @compositionend="onCompositionEnd"/>
    <span v-if="titleNum >= 5" v-text="titleNum + '/100'"></span>
    <span v-else>标题不得小于5个字</span>
  </div>
</div>

JS:

titleChange(e) {
  if (!this.isCN) {
    this.titleNum = e.target.value.length
  }
},
onCompositionStart() {
  this.isCN = true
},
onCompositionEnd() {
  this.isCN = false
}

真的是分分钟解决，网络还是太强大了哈哈