中文输入截断问题

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

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方法，而且通过这么多人检验，确定是没问题的，能够在项目中放心的使用。

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