前端頁面開發的非常多情況下都須要實時監聽文本框輸入，比方騰訊微博編寫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事件的差別：

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

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