input value值的实时监听

 

oninput,onpropertychange,onchange的用法

onchange触发事件必须满足两个条件：

a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）

b）当前对象失去焦点(onblur)；

onpropertychange的话，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；

 

关于oninput事件

oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。 oninput 事件兼容为ie9+, ie下可以onpropertychange事件，不是本节内容。

只要内容又发生变化都会触发oninput事件，对于用键盘直接输入的纯字符时比较好用，但当输入中文时，由于中文是由多个汉语拼音组成一个汉字，没输入一个汉语拼音都要触发一次oninput，但你最终想要监听的只有最后输入的中文字。也就是说input事件无法区分键盘直接输入和非直接（输入法）输入。对于非直接（输入法）输入，则需要用到下面两个事件。

compositionstart和compositionend属于复合事件，用来处理IME的输入序列。

IME（input MEthod Editor，输入法编辑器）可以让用户输入物理键盘上找不到的字符，例如汉字“龙”。先简单理解为对输入法程序的监听。

compositionstart

在IME的文本复合系统打开时出发,例如使用中文输入法输入中文时， compositionstart事件会以同步模式触发.

compositionend

在IME的文本复合系统关闭时触发，表示返回正常键盘输入状态。

看了两个事件就明白,开始中文输入时会触发compositionstart事件选词结束后会触发compositionend事件,忽略这两个事件之间的input事件即可，为元素添加这个两个事件，做一个开关，如下:

<input type="text" id="sample" />

var node = document.querySelector('#sample');
var inputLock = false;
node.addEventListener('compositionstart', function(){
    inputLock = true;
})
node.addEventListener('compositionend', function(){
    inputLock = false;
})
node.addEventListener('input', function(){
    if(!inputLock )
    // do something for input limit

});

 

compositionstart 、compositionend和input三个事件的执行顺序是compositionstart  -->  input (一次或多次) --> compositionend。

下面是一个对input的输入进行监听的一段实例代码，通过inputLock来过滤IME时的input事件。

function initNameInputEvent(){ 
    var $name = $("#name"); 
    var inputLock = false;
    $name.bind('input propertychange',
        function(e){    
            if(!inputLock)
                onInputChange(e.target);    
        }); 
    $name.bind('compositionstart', 
        function(){ 
            console.log("start");    
            inputLock = true; 
        }); 
    $name.bind('compositionend', 
        function(e){ 
            inputLock = false; 
            onInputChange(e.target); 
        }); 
}