前端頁面開發的很多情況下都需要實時監聽文字框輸入，比如騰訊微博編寫140字的微博時輸入框hu9i動態顯示還可以輸入的字數。過去一般都使用onchange/onkeyup/onkeypress/onkeydown實現，但是這存在著一些不好的使用者體驗。比如onchange事件只在鍵盤或者滑鼠操作改變物件屬性，且失去焦點時觸發，指令碼觸發無效；而onkeydown/onkeypress/onkeyup在處理複製、貼上、拖拽、長按鍵（按住鍵盤不放）等細節上並不完善。

onpropertychange屬性可在某些情況下解決上面存在的問題，不用考慮是否失去焦點，不管js操作還是鍵盤滑鼠手動操作，只要HTML元素屬性發生改變即可立即捕獲到。遺憾的是，onpropertychange為IE專屬的。其他瀏覽器下如果想要實現這一實時監聽的需求，就要用到HTML5中的標準事件oninput，不過IE9以下的瀏覽器是不支援oninput事件的。

所以我們需要綜合oninput和onpropertychange二者來實現文字區域實時監聽的功能。舉例如下：

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

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

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

下面引用一篇譯文：

HTML5將oninput事件標準化了，該事件用來檢測使用者的輸入狀態。當然，通過使用onkeydown或者onkeyup作為代替也是可以的。這些事件設計本意也並非如此，參見詳情。

'oninput' in document.createElement('input')

someElement.oninput = function() {
  el.onkeydown = null;
  // Your code goes here
};
someElement.onkeydown = function() {
  // Your code goes here
}

keydown事件僅會被觸發一次（在oninput事件觸發前），之後再觸發oninput。雖然並不完美，但總比寫上一大堆oninput特性檢測程式碼要好些吧。

譯文部分轉自：http://blog.163.com/jinlu_hz/blog/static/1138301522011431102044154/
譯文原地址：http://mathiasbynens.be/notes/oninput
譯文原作者：mathias