中文输入截断问题

前几天一个项目中需要对一个输入框输入进行限制，不能输入数字，可以输入汉字字母其他字符等。
心想这个不难，便随手写下了如下代码：

    const inputEle = document.querySelector('#input')
    const idReg = /[0-9]/g
    inputEle.addEventListener('input', function(e){
        let value = e.target.value

        value = value.replace(idReg, '')
        inputEle.value = value
    })

但是等提到测试环境后，结果被测试同学发现在中文输入法下回出现如下问题：

IME问题

最终寻找一番后发现，原来这是IME问题，即中文输入时出现在输入框上方的带候选但还未选择的状态，其实这个在韩文日文等非字母文字中都会出现这个问题。
那如何解决呢。

用搜索引擎一搜索，便看到了有人说可以通过compositionstart和compositionend判断是否处于IME状态。但是这个两个函数从来没见过，敢用吗？兼容性如何？

于是便到caniuse和MDN上看看。

caniuse上根本就没没有这个函数的兼容性报告，MDN上虽然说可以用，但是心里还是没底。
这时想到vue文档中好像提过关于中文输入，于是马上就翻了翻vue的文档。

在vue源码中寻找答案

vue文档中有如下一段话

对于需要输入法编辑器的语言（中文、日文、韩文等），要注意的是，在 IME 字母组合窗口输入时 v-model 并不会更新。如果你想在此期间满足更新需求，请使用 input 事件。

说明vue解决了这个问题，那vue是怎么实现的，是使用compositionstart和compositionend，还是其他方法？于是带着疑问道vue的源码中寻找答案。

在关于v-model相关代码中很快就看到了这行代码

  if (needCompositionGuard) {
    code = `if($event.target.composing)return;${code}`
  }

但是很明显composing不是event.target的标准属性，那是从哪里来的呢，于是全局搜索了composing，很快在这里找到了答案。

    function onCompositionStart (e) {
      e.target.composing = true
    }
    
    function onCompositionEnd (e) {
      e.target.composing = false
      trigger(e.target, 'input')
    }

而这两个函数是在哪里被调用的呢？就在当前文件内一搜索就找到了。

  el.addEventListener('compositionstart', onCompositionStart)
  el.addEventListener('compositionend', onCompositionEnd)

哈哈，原来就是前面所说的compositionstart和compositionend方法。

结论

既然vue中使用的就是compositionstart和compositionend方法，并且经过这么多人检验，肯定是没问题的，可以在项目中放心的使用。

虽然一开始就找到了正确的答案，但是后面的求证才是最有价值的。