js如何判断当前文本的输入状态——中文输入法的那些坑

在 web 开发中，我们通常需要对输入的内容进行校验。这段代码虽然执行起来没有什么问题，但是会产生非直接输入，比方说我们输入中文时候，中间过程会输入拼音，每次输入字母都会触发input事件，然而当中文输入完成之前，都属于非直接输入。

一般说到修改用户的输入，第一个想法肯定是绑定input事件，input事件能够检测用户的每一次输入，例如我们要将用户输入的文字实时转换成大写，只需要input事件绑定以下方法

function(e){
e.target.value=e.target.value.toUpperCase()
}
这种方法对于英文输入时完全没毛病，但是一旦用户切换到中文输入法或者手写输入，你就会发现，问题来了，input事件会触发，但你每次捕获到的e.target.value却不是你输入的中文，例如我们执行下面的代码

document.getElementById('testInput').addEventListener('input',function(e){
        console.log('输入内容：'+e.target.value);
    },false);
你会发现是这样一种情况（测试工具：chome，ie经过测试并未存在此问题）

这并非是我们想要的结果，我们希望直接输入(中文输入完成)后，再触发 input 的业务逻辑，此时就需要引入其他两个事件 compositionstart 和 compositionend。那么，我们如何捕获中文输入法或者其他非直接输入法的输入状态呢，

参考以下两个事件

1.compositionstart，事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）

2.compositionend，当文本段落的组成完成或取消时, compositionend 事件将被激发 (具有特殊字符的激发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)

简单来说，非直接输入法如中文输入开始时，触发compositionstart事件，结束时触发compositionend事件，这样，我们跟input事件进行配合，就能对所有的输入进行实时的检测了，示例代码如下

window.οnlοad=function(){
    var doing=false;
    var doSomething=function(e){
        //我要干点啥
    }
    document.getElementById('testInput').addEventListener('compositionstart',function(e){
        doing=true;
    },false);
    document.getElementById('testInput').addEventListener('input',function(e){
        if(!doing){
            doSomething();
        }
    },false);
 
    document.getElementById('testInput').addEventListener('compositionend',function(e){
        doing=false;
        doSomething();
    },false);
}
最后，这两个事件比较新，并不兼容所有的浏览器，但经过测试，兼容目前大部分的移动端浏览器，ie9仿真情况下测试通过，chome测试通过，Firefox9.0以上测试通过

事件解释

• compositionstart
  是指中文输入法开始输入触发，每次输入开始仅执行一次，执行的开始是 end 事件结束了才会触发

• compositonupdate
  是指中文输入法在输入时触发，也就是可能得到 kan'dao'l'm 这种内容，这里返回的内容是实时的，仅在 start 事件触发后触发，输入时实时触发

• compositionend
  是指中文输入法输入完成时触发，这是得到的结果就是最终输入完成的结果，此事件仅执行一次。
  需要特别注意的是：该事件触发顺序在 input 事件之后，故而需要在此事件的处理逻辑里调用一次 input 里边的业务逻辑

参考资料：

compositionstart相关

compositionend相关

https://blog.csdn.net/handsomexiaominge/article/details/80977402 

http://shenyujie.cc/2017/08/24/indirectInput/