要達到的效果
很多情況下我們都會即時監聽輸入框值的變化，以便作出即時動作去引導瀏覽者增強網站的用戶體驗感。比如即時顯示輸入框已經被輸入的字節數，或者即時讀取輸入的值來進行搜索引導，也就是google的關聯搜索效果等
需要了解的知識
首先，我們需要了解onchange和onpropertychange的不同：
IE8下，當一個HTML元素的屬性改變的時候，都能通過 onpropertychange來即時捕獲。
onchange在屬性值改變時還必須使得當前元素失去焦點(onblur)才可以激活該事件。
了解這一點后我們發現onpropertychange的效果就是我們想要的，可是很遺憾，它只在IE8以下有效果。我們能不能找到另外一個時間來代替onpropertychange呢？
經過翻閱資料得知，在其他瀏覽器下可以使用oninput事件來達到同樣的效果，這樣我們只需要把IE8以下瀏覽器區分出來就可以。
js判斷IE瀏覽器的四種方法：
方法一：
if(window.addEventListener){
alert("not ie");
}else if(window.attachEvent){
alert("is ie");
}else{
alert("這種情況發生在不支持DHTML的老版本瀏覽器（現在一般都支持）")
}
注釋：該方法在IE9及以上IE版本會彈出not ie結果
方法二：
if(document.all){
alert("IE");
}else{
alert("not ie");
}
方法三：
var navigatorName = "Microsoft Internet Explorer";
if( navigator.appName == navigatorName ){
alert("ie")
}else{
alert("not ie")
}
方法四：
利用了IE與標准瀏覽器在處理數組的toString方法的差異.對於標准游覽器，如果數組里面最后一個字符為逗號，JS引擎會自動剔除它.
if(!+[1,])alert("這是ie瀏覽器");
else alert("這不是ie瀏覽器");
注釋：IE8及以上版本會彈出“這不是IE瀏覽器”
判斷常用瀏覽器的方法：
var explorer =navigator.userAgent ;
//ie
if (explorer.indexOf("MSIE") >= 0) {
alert("ie");
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
alert("Firefox");
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0){
alert("Chrome");
}
//Opera
else if(explorer.indexOf("Opera") >= 0){
alert("Opera");
}
//Safari
else if(explorer.indexOf("Safari") >= 0){
alert("Safari");
}
//Netscape
else if(explorer.indexOf("Netscape")>= 0) {
alert('Netscape');
}
到目前為止我們遇到的問題就已經解決了，開始寫代碼來實現功能。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js監聽輸入框值的即時變化</title>
</head>
<body>
<input type="text" id="text">
<div id="div"></div>
<script type="text/javascript">
var watch = function(){
var txt = inp.value;
div.innerHTML = txt;
}
var div = document.getElementById("div");
var inp = document.getElementById("text");
if(!+[1,]){
inp.onpropertychange = watch;
}else{
inp.oninput = watch;
}
</script>
</body>
</html>