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

相信各位在平时接需求的时候肯定会遇到这样的一些需求，例如，要求输入框限制输入长度，限制输入类型，限制只能英文输入，限制只能输入大写字母等等，这时候我们一般的思路无非两种，一种是弹出特定的键盘，第二种是在输入的过程中对输入内容进行正则匹配，然后根据自己的需求对input框进行赋值。弹出特定键盘可以通过对input框的type属性进行赋值，但由于不同的浏览器对弹出的输入框都有比较严格的限制，并且弹出之后用户可以进行切换，达不到限制用户输入的目的，所以接下来主要讨论第二种方法。

一般说到修改用户的输入，第一个想法肯定是绑定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经过测试并未存在此问题）

那么，我们如何捕获中文输入法或者其他非直接输入法的输入状态呢，参考以下两个事件

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

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

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

window.onload=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相关

compositionend相关
---------------------
作者：小敏哥
来源：CSDN
原文：https://blog.csdn.net/handsomexiaominge/article/details/80977402
版权声明：本文为博主原创文章，转载请附上博文链接！