首页 > 代码库 > oninput和onpropertychange实时监听输入框值的变化
oninput和onpropertychange实时监听输入框值的变化
oninput和onpropertychange实时监听输入框值的变化
传统监听输入框的做法就是使用keyup、keydown、keypress，或者change事件来实现，但keyup、keydown、keypress事件是只要完成击键事件后就触发，不考虑输入框的值是否变化，也监听不了使用鼠标右键[剪贴]和[粘贴]这些操作，更监听不了使用JS动态改变值的变化。而change事件必须是焦点离开输入框后才触发，并不能实时监听。所以这几个事件来监听输入框值变化并不完美。ie浏览器(ie6-8)可以直接使用onpropertychange事件来实时监听(包括JS动态改变值)，而标准浏览器(包括IE9+)可以使用HTML5薪增的oninput事件来监听，但是oninput并不能监听JS动态改变的值，网上虽然有很多方面的资料，很是很多都没有讲到监听JS动态改变值，碰巧今天同事做手机端碰到这个问题问到我，所以就总结了下！
JSFiddler效果如下：
你可以狠狠的点击这里：监听输入框值的变化
IE下onpropertychange实时监听输入框值的变化
首先我们可以做个简单的demo来测试下，代码如下：
HTML代码：
<h2>IE6-8监听输入框值的变化--onpropertychange事件，可以监听到js动态设置值</h2><input type="text" id="input" /><div id="value" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>
JS代码：
// 兼容IE下(IE6-8) 键盘事件 IE9不支持此事件$("#input").bind("propertychange",function(e){ var value =http://www.mamicode.com/ $(e.target).val(); $("#value").html(value);});// 兼容IE下 动态改变输入框值 是否监听到？$("#input").val("11");
onpropertychange监听的是元素的property属性，并不只局限于value，也可以监听其他标准属性值，如：input的name值，效果可以看JSfiddler上面的链接。
标准浏览器下oninput实时监听输入框值的变化
HTML代码如下：
<!-- IE9+标准浏览器 --><h2>标准浏览器监听输入框值的变化--oninput事件，不能监听到js动态设置值,但是可以监听到键盘事件值的变化</h2><input type="text" id="input2" /><div id="value2" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>
JS代码如下：
// 兼容标准浏览器 chrome firefox IE9+等 但是动态设置值并不支持$("#input2").bind(‘input‘,function(e){ var value =http://www.mamicode.com/ $(e.target).val(); $("#value2").html(value);});// 兼容标准浏览器下 动态改变输入框值 是否监听到？$("#input2").val("11");
标准浏览器下使用oninput事件也可以监听输入框值的变化，但是他和IE的onpropertychange事件有点不同：
oninput不能监听JS动态改变的属性或者值。特别是想在移动开发上使用这个事件，但是纠结的不能监听到这个事件。
使用定时器功能来监听各个浏览器输入框值的变化(包括JS动态改变值或者属性)。
HTML代码如下：
<h2>下面是对浏览器做兼容性处理，使用定时器</h2><input type="text" id="input3" /><div id="value3" style="width:100%;height:30px;border:1px solid red;margin:10px 0"></div>
JS代码如下：
// 兼容各个浏览器下var timer = 0, curVal = "";$("#input3").bind("propertychange input",function(e){ if(timer){ clearInterval(timer); timer = 0; } curVal = $(e.target).val(); $("#value3").html(curVal); interval();});function interval(){ timer = setInterval(function() { if (curVal != $("#input3").val()) { curVal = $("#input3").val();
$("#value3").html($("#input3").val()); } }, 100);}interval();// 兼容各个浏览器下 动态改变输入框值 $("#input3").val("11");
如上，使用定时器去不断检测值是否和当前值是否相等。