输入框input内容变化与onpropertychange事件的兼容

一.输入框常用的几个事件

onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onpaste	粘贴
oncopy	复制
oncut	剪切

 

 

 

下面对以上几个事件进行监听

 

var events = [
    'keyup','keydown','copy','paste','input','blur','focus','keypress','change'
];

for(var i in events){
     (function(i){
        $addEvent(textarea,events[i], function(e){
            console.log('event:' + events[i],e);
        });
    })(i);
}

 

　　

 

总结：

（1）关于blur focus事件 ，都只会触发一次，什么意思呢，就是你点击输入框后，会触发一次focus事件，你在输入框中再怎么点都不会触发第二次focus。blur 同理。

（2）关于keydown 和 keyup，在输入框输入文字时，首先触发keydown → keypress → input → keyup 事件。

（3）关于change事件，在火狐和chrome 下面用户在输入框输入文字后，输入框才会触发change事件，然后紧接着是失去焦点（blur）事件。 

（4）面对特殊字符的表现  

　　shift、control 　　只有keydown → keyup 两个事件，因为不会改变输入框内容，所以没有 input 事件

　　caps lock 　　　　火狐下面 只有keydown 事件，chrome 可以判断是按下普通状态还是按下状态，给出的分别的keyup 和 keydown 事件。

 　　delete 　　　　　如果删除了输入框的文字，触发的事件为

　　　　　　　　　　　　keydown → keypress（keypress事件在chrome 下面有，火狐没有） →  input  →  keyup 事件

　　　　　　　　　　 如果文字已经全删除，再次按delete 触发的事件只有keydown  → keyup 事件

　　总之:

 　　　　只有输入框中的文字内容变化了，input 事件才会被触发。

　　　　基本上keydown 和 keyup 就可以监听文本的变化了，但是无法监听到复制、粘贴事件（非快捷键）　　

（5）输入法开启时

　　输入的过程中不会出现keypress事件，触发的是keydown  → input → keyup 事件

（6）onpropertychange 方法只能用在IE中，所以在判断一个输入框中内容改变时，需要兼容IE 以及非IE 问题

（7）程序控制输入框属性（height, value , innerHTML）

　　在IE 中使用onpropertychange 可以很好的进行捕获。

　　在非IE 中无法捕获。 

二.需求

　　现在问题来了，如何实时监听输入框的输入内容呢？

方案一： 对IE 监听onpropertychange事件，非IE 使用input 事件

var ua = navigator.userAgent.toLowerCase();
var isIE = /msie/.test(ua);
var node = document.getElementById('input');
var func = function(){
    //TODO
}
if(isIE){
    node.attachEvent('onpropertychange', function(){
        if(window.event.propertyName == 'value'){
            //func();
        }
    });
} else{
    node.addEventListener('input',func, false);
}

方案二：

不区别浏览器，判断 'keyup', 'paste', 'cut', 'mousedown', 'mouseup', 'keydown', 'focus' 事件

//密集操作延时处理，减轻计算压力
$each(['keyup', 'paste', 'cut', 'mousedown', 'mouseup', 'keydown', 'focus'],  function (event, index) {
                $addEvent(node, event, function () {
                    clearTimeout(me._checkTimer);
                    me._checkTimer = setTimeout(function () {
                        me._checkInput();
                    }, 500);
                });
            });