js与jquery实时监听输入框值的oninput与onpropertychange方法

本文转自： http://www.jb51.net/article/60789.htm，

http://www.cnblogs.com/xiaoxianweb/p/6387255.html，

http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html

本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。

A:项目中下拉框里自动匹配关键字，具体细节是实时监听文本框 value 值的变化，然后匹配相关内容。

首先想到的是 JQ 里的 change，但是马上排除此方法，因为 change 是在文本框失去焦点时才会触发。

用 keydown 来解决。只是当不通过键盘操作，而是通过鼠标来复制粘贴时，这个事件是无法触发的。所以这个方法也排除掉了。

然后，查询了一些相关资料，发现只有原生 js 的 oninput & onpropertychange 符合此要求，但是 bind 确实会绑定类似的事件，那便是 input & propertychange，通过测试，确实是没问题的。

现在将例子奉上：

JQ：

 
        $('input').bind('input propertychange', function() {   
       
           //code 
       
        });

其中：propertychange 是为了兼容 IE9 以下版本的。

JS中的 oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：

修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。

修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
修改了 select 元素的选中项，selectedIndex 属性发生变化。
JS：

 
        if(isIE)  
       
        {  
       
         document.getElementById("input").onpropertychange = keys();  
       
        }  
       
        else //需要用addEventListener来注册事件  
       
        {  
       
         document.getElementById("input").addEventListener("input", keys, false); 
       
        }

B:文本框输入监听事件一个文本框，一个按钮，当文本框输入内容时，按钮可用，当删除内容时，按钮不可用。

刚开始用的focus和blur，

$(".pay-text").focus(function(){

$(".pay-btn").attr("disabled",false);

});

$(".pay-text").blur(function(){

$(".pay-btn").attr("disabled",true);

});

自然是不行的，文本框获得焦点后，按钮不可用，要输入进内容，按钮才可用。又试了keyup事件

$(".pay-text").keyup(function(){

$(".pay-btn").attr("disabled",false);

});

输入是实现了，但是当把输入的内容删除时，按钮不可用没有实现。加入if判断

if($(this).val==""){

$(".pay-btn").attr("disabled",true);

}

else{

$(".pay-btn").attr("disabled",false);

}

ie8以下是不支持的，IE9以下用propertychange 兼容 IE9 以下版本的。还好我这个项目只在移动端使用，于是最后的代码为：

html:

js:

function moneyChange(e){

var money=$(e).val();

$(".pay-btn").attr("disabled",false);

if(money==""){

$(".pay-btn").attr("disabled",true);

}

};

汇总onchange onpropertychange 和oninput事件的区别：

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

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

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

oninput事件是IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value时，却不会触发；onpropertychange事件是任何属性改变都会触发的，而oninput却只在value改变时触发，oninput要通过addEventListener()来注册，onpropertychange注册方式跟一般事件一样。（此处都是指在js中动态绑定事件，以实现内容与行为分离）

3、oninput与onpropertychange失效的情况：

（1）oninput事件：a). 当脚本中改变value时，不会触发；b).从浏览器的自动下拉提示中选取时，不会触发。

（2）onpropertychange事件：当input设置为disable=true后，onpropertychange不会触发。

附加：

js的事件绑定方法中，ie只支持attachEvent,而FF和Chrome只支持addEventListener，所以就必须为这两个方法做兼容处理，原理是先判断attachEvent只否为真（存在），如果为真则用attachEvent（）方法，否则的话就用addEventListener（）。

另外，为了避免每次绑定事件时都要做判断，可以封装一个函数myAddEvent(obj,ev,fn){}。