码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-03-11 16:20:18      阅读:2187      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!