转载

实时监测input控件value值动态变化的事件

前面的话

HTML5为input控件新增了很多type属性，大大增加了input控件的应用场景。其中一个是type="range"的input控件，可以通过拖动游标改变value值，但并不是所有浏览器都可以实时显示，除了IE10+浏览器

说到改变value值的事件，首先想到的便是change事件，但change事件的触发条件是失去焦点并且value值改变。而游标拖动并没有失去焦点。所以，change事件并不能达到目的

[注意]IE10+浏览器对change事件处理方式不同

input事件

HTML5新增了一个input事件，只要输入框内容发生变化就会立即触发，但通过javascript改变value时不会触发

[注意]该事件IE8-和IE10+浏览器不支持

 <input type="range" id="input"><span id="data"></span> <script>     input.oninput = function(){         data.innerHTML = this.value;     } </script>

propertychange事件

IE有一个专有事件叫propertychange事件，该事件会在设置disable="true"时失效。propertychange触发函数只有一个默认参数，是所有可以触发属性的集合。该事件是在触发对象改变任何属性时都会触发

[注意]IE11浏览器不支持

 <input type="range" id="input"><span id="data"></span> <script>     input.onpropertychange = function(){         data.innerHTML = this.value;     } </script>

兼容处理

IE11虽然能实时显示value变化值，却无法显示value变化后的最终值。IE10+浏览器对change事件处理和其他浏览器不一致，不需要失去焦点就可以触发change事件，因此实时监测input控件value值动态变化兼容写法为

 <input type="range" id="input"><span id="data"></span> <script>     input.onpropertychange = input.oninput = input.onchange = function(){         data.innerHTML = this.value;     } </script>

原文 http://www.cnblogs.com/xiaohuochai/p/5204702.html

正文到此结束