輸入框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);
                });
            });