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

Posted 2020-06-14

目录

[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>