前端頁面開發(fā)的很多情況下都需要實時監(jiān)聽文本框輸入，比如騰訊微博編寫140字的微博時輸入框hu9i動態(tài)顯示還可以輸入的字數(shù)。過去一般都使用onchange/onkeyup/onkeypress/onkeydown實現(xiàn)，但是這存在著一些不好的用戶體驗。比如onchange事件只在鍵盤或者鼠標操作改變對象屬性，且失去焦點時觸發(fā)，腳本觸發(fā)無效；而onkeydown/onkeypress/onkeyup在處理復(fù)制、粘貼、拖拽、長按鍵（按住鍵盤不放）等細節(jié)上并不完善。
onpropertychange屬性可在某些情況下解決上面存在的問題，不用考慮是否失去焦點，不管js操作還是鍵盤鼠標手動操作，只要HTML元素屬性發(fā)生改變即可立即捕獲到。遺憾的是，onpropertychange為IE專屬的。其他瀏覽器下如果想要實現(xiàn)這一實時監(jiān)聽的需求，就要用到HTML5中的標準事件oninput，不過IE9以下的瀏覽器是不支持oninput事件的。
所以我們需要綜合oninput和onpropertychange二者來實現(xiàn)文本區(qū)域?qū)崟r監(jiān)聽的功能。舉例如下：
例1、對支持oninput的瀏覽器用oninput，其他瀏覽器（IE6/7/8）使用onpropertychange：
[javascript]view plaincopy
vartestinput?=?document.createElement('input');
if('oninput'intestinput){
object.addEventListener("input",fn,false);
}else{
object.onpropertychange?=?fn;
}
例2、對所有ie使用onpropertychange，其他瀏覽器用oninput：
[javascript]view plaincopy
varie?=?!!window.ActiveXObject;
if(ie){
object.onpropertychange?=?fn;
}else{
object.addEventListener("input",fn,false);
}
匯總onchange onpropertychange 和oninput事件的區(qū)別：
1、onchange事件與onpropertychange事件的區(qū)別：
onchange事件在內(nèi)容改變（兩次內(nèi)容有可能還是相等的）且失去焦點時觸發(fā)；onpropertychange事件卻是實時觸發(fā)，即每增加或刪除一個字符就會觸發(fā)，通過js改變也會觸發(fā)該事件，但是該事件IE專有。
2、oninput事件與onpropertychange事件的區(qū)別：
oninput事件是IE之外的大多數(shù)瀏覽器支持的事件，在value改變時觸發(fā)，實時的，即每增加或刪除一個字符就會觸發(fā)，然而通過js改變value時，卻不會觸發(fā)；onpropertychange事件是任何屬性改變都會觸發(fā)的，而oninput卻只在value改變時觸發(fā)，oninput要通過addEventListener()來注冊，onpropertychange注冊方式跟一般事件一樣。（此處都是指在js中動態(tài)綁定事件，以實現(xiàn)內(nèi)容與行為分離）
3、oninput與onpropertychange失效的情況：
（1）oninput事件：a). 當(dāng)腳本中改變value時，不會觸發(fā)；b).從瀏覽器的自動下拉提示中選取時，不會觸發(fā)。
（2）onpropertychange事件：當(dāng)input設(shè)置為disable=true后，onpropertychange不會觸發(fā)。
下面引用一篇譯文：
HTML5將oninput事件標準化了，該事件用來檢測用戶的輸入狀態(tài)。當(dāng)然，通過使用onkeydown或者onkeyup作為代替也是可以的。這些事件設(shè)計本意也并非如此，參見詳情。
所有的現(xiàn)代瀏覽器支持oninput，其中包括IE9。對于那些老式瀏覽器，在不支持該事件時用keydown作為優(yōu)雅降級。不幸的是，檢測瀏覽器對該oninput事件的支持性并不容易。假定瀏覽器支持oninput，那么以下這段js代碼的返回值為true，否則為false。
'oninput'indocument.createElement('input')
這段代碼在大多數(shù)瀏覽器中正常運行，除了Firefox（見bug #414853），故仍舊需要為oninput作瀏覽器特性檢測。除此以外就沒必要為其他瀏覽器作特性檢測了，只需為input和keydown綁定事件，并在oninput事件觸發(fā)之后刪除onkeydown即可。示例如下：
someElement.oninput=function(){el.onkeydown=null;// Your code goes here};someElement.onkeydown=function(){// Your code goes here}
keydown事件僅會被觸發(fā)一次（在oninput事件觸發(fā)前），之后再觸發(fā)oninput。雖然并不完美，但總比寫上一大堆oninput特性檢測代碼要好些吧。
