概述

前端頁面開發的很多情況下都需要實時監聽文字框輸入，比如騰訊微博編寫140字的微博時輸入框hu9i動態顯示還可以輸入的字數。過去一般都使用onchange/onkeyup/onkeypress/onkeydown實現，但是這存在著一些不好的使用者體驗。比如onchange事件只在鍵盤或者滑鼠操作改變物件屬性，且失去焦點時觸發，指令碼觸發無效；而onkeydown/onkeypress/onkeyup在處理複製、貼上、拖拽、長按鍵（按住鍵盤不放）等細節上並不完善。
onpropertychange屬性可在某些情況下解決上面存在的問題，不用考慮是否失去焦點，不管js操作還是鍵盤滑鼠手動操作，只要HTML元素屬性發生改變即可立即捕獲到。遺憾的是，onpropertychange為IE專屬的。其他瀏覽器下如果想要實現這一實時監聽的需求，就要用到HTML5中的標準事件oninput，不過IE9以下的瀏覽器是不支援oninput事件的。

例1、對支援oninput的瀏覽器用oninput，其他瀏覽器（IE6/7/8）使用onpropertychange：

var testinput = document.createElement('input');      
if('oninput' in testinput){  
    object.addEventListener("input",fn,false);  
}else{  
    object.onpropertychange = fn;  
}  

例2、對所有ie使用onpropertychange，其他瀏覽器用oninput：

var
 
 ie = !!window.ActiveXObject;  
if(ie){  
    object.onpropertychange = fn;  
}else{  
    object.addEventListener("input",fn,false);  
}  

彙總onchange onpropertychange 和oninput事件的區別：

• 1.onchange 在內容發生改變的時候，並且失去焦點的時候觸發， onpropertychange則是在實時觸發，就是每個字元的增加和觸發，通過js觸發也會發生改變，但是該事件是IE轉有
• 2、oninput事件與onpropertychange事件的區別：
  oninput事件是IE之外的大多數瀏覽器支援的事件，在value改變時觸發，實時的，即每增加或刪除一個字元就會觸發，然而通過js改變value時，卻不會觸發；onpropertychange事件是任何屬性改變都會觸發的，而oninput卻只在value改變時觸發，oninput要通過addEventListener()來註冊，onpropertychange註冊方式跟一般事件一樣。（此處都是指在js中動態繫結事件，以實現內容與行為分離）
• 3、oninput與onpropertychange失效的情況：
  （1）oninput事件：a). 當指令碼中改變value時，不會觸發；b).從瀏覽器的自動下拉提示中選取時，不會觸發。
  （2）onpropertychange事件：當input設定為disable=true後，onpropertychange不會觸發。