你的位置:首页 > Java教程

[Java教程]实时监测input控件value值动态变化的事件


目录
[1]input [2]propertychange [3]兼容处理

前面的话

  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>