要达到的效果 
　　很多情况下我们都会即时监听输入框值的变化，以便作出即时动作去引导浏览者增强网站的用户体验感。比如即时显示输入框已经被输入的字节数，或者即时读取输入的值来进行搜索引导，也就是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>