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

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

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

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

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);                });            });