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相关

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

猜你喜欢