禁止input的"非法输入"

"非法输入"：当连续输入多个字母，但是并没有确定想输入的中文字符之前，都属于非法输入。会多次触发事件，实际上我们想要在我们确定中文之后再触发。

所以可以用以下两个事件解决这个问题：

• compositionstart 

文本合成系统如 input method editor (即输入法编辑器) 开始新的输入合成触发此事件。

• compositionupdate 

每次输入字符都会被触发。

• componsitionend

当文本段落的组成完成或取消时，该事件将会被触发。

执行顺序如下图：

禁止非法输入的例子：

// lock 用于标记是否非直接输入
let lock = false
const input = document.querySelector('.input')
input.addEventListener('compositionstart', () => {
  // 开启了中文输入法
  lock = true
})
input.addEventListener('comositionend', () => {
  // 关闭了中文输入法
  lock = false
})
input.addEventListener('input', (e)=> {
  //  忽略非直接输入
  if(!lock) console.log(e.target.value)
})