input标签内容改变的触发事件

标签：

1. onchange事件与onpropertychange事件的区别：

　　onchange事件在内容改变（两次内容有可能相等）且失去焦点时触发；onpropertychange事件是实时触发，每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件是IE专有。

2. oninput事件与onpropertychange事件的区别：

　　oninput事件是IE之外的大多数浏览器支持的事件，在value改变时实时触发，但是通过js改变value时不会触 发；onpropertychange事件是任何属性改变都会触发，而oninput却只在value改变时触发，oninput要通过 addEventListener()来注册，onpropertychange注册方法与一般事件相同。

3. oninput与onpropertychange失效的情况：

oninput事件：

　　（1）当脚本中改变value时，不会触发；

　　（2）从浏览器的自动下拉提示中选取时，不会触发；

onpropertychange事件：

　　当input设置为disable=true后，不会触发

其实对于一般的input标签；只要用下面的代码就能实现；但是对于使用了日期插件的就不能用了：

 <input placeholder="生效月份" id="SXYF" name="SXYF"    class="form-control" type="text" onFocus="WdatePicker({el: ‘SXYF‘,dateFmt:‘yyyy-MM‘,skin:‘whyGreen‘});" readonly="readonly" value="" onchange="handle()">

方案一：

$("#id").keyup(function(){
    alert("bingo");
});

方案二：

//对于有日期插件的怎么办呢：下面来解决：：：

 <input placeholder="生效月份" id="SXYF" name="SXYF"    class="form-control" type="text" onFocus="WdatePicker({el: ‘SXYF‘,dateFmt:‘yyyy-MM‘,skin:‘whyGreen‘});" readonly="readonly" value="" onchange="handle()">

 var starttime= document.getElementById("SXYF");
   if("\v"=="v") { //判断浏览器是否是IE
       starttime.onpropertychange = handle;
   }else{
       starttime.addEventListener("input",handle,false);
   }

方案三：

 <input placeholder="生效月份" id="SXYF" name="SXYF"    class="form-control" type="text" onFocus="WdatePicker({el: ‘SXYF‘,dateFmt:‘yyyy-MM‘,skin:‘whyGreen‘});" readonly="readonly" value="" onpropertychange="handle()">

//firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。
   if(/msie/i.test(navigator.userAgent))    //ie浏览器
   {
       document.getElementById(‘SXYF‘).onpropertychange=handle
   }
   else
   {//非ie浏览器，比如Firefox
       document.getElementById(‘SXYF‘).addEventListener("input",handle,false);

   function handle()
       {

          alert("bingo);

       }

扩展：

http://www.jb51.net/article/14654.htm

input标签内容改变的触发事件

标签：

原文地址：http://www.cnblogs.com/wushuishui/p/4329894.html