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

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