文本框内容改变触发事件

input 在IE中有onchange事件,但是这个事件所表现的效果不是我们想要的,它所表现的效果为:当input内的内容发现更改时,并不会触发你所指定的方法(函数),所以一般的人不用使用这个事件,而会使用,onpropertychange 这个事件,,在IE下是可行的。。但是在FF下面呢就不行了。。

于是我从网上找到如下代码去解决FF下不行

jQuery(function($) {
         if (navigator.userAgent.indexOf("MSIE") > 0) {
              document.getElementById('txtABC').attachEvent("onpropertychange", txChange);
          }
          else if (navigator.userAgent.indexOf("Firefox") > 0) {
              document.getElementById('txtABC').addEventListener("input", txChange2, false);          

          }
     })

这个方法的原理就是先判断是哪种浏览器,然后使用它们自带的事件注册方法去注册事件。

这个方法有个问题,如果你要兼容N个浏览器的话那你不要是写N个浏览器的注册事件吗?

于是又一个解决的方法出现了,,

它的原理很简答,就是监视键盘事件,每次获取键盘事件时,都会去判断是否与前一次内容是否相同,不相同就触发相关方法(函数)

代码如下:

var txtValue;
       
        ////////    预加载
        jQuery(function($) {

            txtValue = $("#txtABC").val();

            ////////    给txtbox绑定键盘事件
            $("#txtABC").bind("keydown", function() {
                var currentValue = $(this).val();
                if (currentValue != txtValue) {
                    TxtChange();

                    txtValue = currentValue;
                }

            });

        });

        //////  目标选择框文本发生更改时
        function TxtChange() {
            alert('');          
        }

因为大部分浏览器都支持,keydown事件,所以这么写可以兼容大部分浏览器。。

posted @ 2013-07-03 09:47  高宝建  阅读(28795)  评论(1编辑  收藏  举报