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