propertychange和oninput事件笔记

项目中常遇到输入框检查的需求，比如即时搜索，用change事件？change事件失去焦点才发生，无法做到即时。keypresss事件？能监听到键盘，但监听不到鼠标复制粘贴，不完美。

还好有propertychange（IE）和oninput事件。

oninput是标准浏览器的事件，一般应用于input元素，当input的value发生变化时就会发生，无论是键盘输入还是鼠标粘贴的改变都能即时监听到。

浏览器兼容

例子

代码如下

复制代码

<div id="msg"></div>  <input id='txt' value="" />  <script>  //当状态改变的时候执行的函数  function handle()  {document.getElementById('msg').innerHTML='输入的文字长度为：'+document.getElementById('txt').value.length;  }  //firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。  if(/msie/i.test(navigator.userAgent))    //ie浏览器  {document.getElementById('txt').onpropertychange=handle  }  else  {//非ie浏览器，比如Firefox  document.getElementById('txt').addEventListener("input",handle,false);  }  </script>

在textarea中，如果想捕获用户的键盘输入，用onkeyup检查事件就可以了，但是onkeyup并不支持复制和粘贴，因此需要动态监测textarea中值的变化，这就需要onpropertychange（用在IE浏览器）和oninput（非IE浏览器）结合在一起使用了。

代码如下	复制代码
<textarea id="wb_comment_content" name="wb_comment_content" onblur="blur_wb_textarea(this);" onfocus="click_wb_textarea(this);" onpropertychange="set_alert_wb_comment();" oninput="set_alert_wb_comment();" class="gary666" style="font-size:12px;" mce_style="font-size:12px;">欢迎您每天来微评爱车哦……

如果想要用JavaScript设置textarea的属性，需如下：

代码如下	复制代码
if(isIE)       {           document.getElementById("wb_comment_content").onpropertychange = set_alert_wb_comment();       }       else //需要用addEventListener来注册事件       {           document.getElementById("wb_comment_content").addEventListener("input", set_alert_wb_comment, false);       }

其余函数

代码如下

复制代码

function click_wb_textarea(obj)              {                  if(obj.value==obj.defaultValue)                  {                      obj.value="";                  }                  //obj.className="";       //这样设置类名在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug                  obj.style.color="#000";                  return false;              }              function blur_wb_textarea(obj)              {                  if(obj.value=="")                  {                      //obj.className="gary666";                      obj.style.color="#666";                      obj.value= obj.defaultValue;                  }                  return false;              }

4、onpropertychange的bug

    在代码实现时，发现在响应用户onclick了textarea时，如果使用obj.className="XX";来改变textarea输入框中字体的样式，会导致在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug，因此需要这样设置：obj.style.color="#000";

IE9以下是不支持的。这个时候就要用到IE专有的propertychange事件。顾名思义，翻译过来叫属性变更事件，这个事件就比较强大了，不仅仅会监听到input的value属性，还包括其他标签的属性各种属性发生变化都会发生该事件，比如span元素的style属性。在事件发生时还可以用event.propertyName访问到改变的属性名。

转自： http://www.111cn.net/wy/js-ajax/60655.htm