onpropertychange、oninput監聽input輸入框值實時變化

項目中要用到監聽input框的輸入值，差實時更新數據，開始用input的onchange 方法，但onchange方法必必須要在失去焦點的情況下才能觸發，很明顯無法滿足我們的需求。

圖1：

圖２　

如圖２所示，輸入關鍵字，立即將結果顯示在下方方框中，以實現實時查看。

onpropertychange：

IE下，onpropertychange　能用於即時捕獲一個html元素的變化情況，而我們常用的onchange，則當 屬性值改變時還必須並且當前元素失去焦點(onblur)時纔可以激活該事件。但onpropertychange只能在IE下使用。

$("#you_input_id").on('input',function(){ //do something  });    
$("#you_input_id").each(function(){
                var _this = this;
                if(this.attachEvent){
                    this.attachEvent('onpropertychange',function(e){
                        if(e.propertyName!='value')return;
                        $(_this).trigger('input');
                    });
                }
            });

以上回調函數中會傳入一個參數e，該事件有很多屬性值，判斷當前發生變化的屬性名稱是否爲我們要找的propertyName, 如果propertyName==value，則表示是input 的value值發生變化，則此時調用 ‘input’事件。

oninput:

ie之外的大部分瀏覽器可以兼容oninput，基本用法如下：

<input type="text" name="youinput" oninput="alert(this.value);"/>

如果你使用的jquery庫，則可以這樣使用：

    $("#you_input_id").on('input',function(){
        //do something
   });

要兼容不同瀏覽器，只需將如下代碼放入即可：

$("#you_input_id").on('input',function(){ //do something  });    
$("#you_input_id").each(function(){
                var _this = this;
                if(this.attachEvent){
                    this.attachEvent('onpropertychange',function(e){
                        if(e.propertyName!='value')return;
                        $(_this).trigger('input');
                    });
                }
            });