oninput事件和onpropertychange事件的用途
2018-07-03 23:36

onpropertychange和oninput

onpropertychange事件是IE浏览器提供的一个事件,可以检测一个元素上属性的变化,包括input的value值以及自定义属性。

oninput事件是H5提供的一个事件,可以用来检测input/textarea的value值得变化,包括输入,剪切,粘贴引起得value值变化。


在对于input/textarea的值需要检测的时候,我们可以使用oninput事件,这一个事件就可以代替onblur,onpaste,oncut,onkeyup好几个事件的功能(IE9+的浏览器都支持),而需要兼容IE的时候,我们可以使用onperopertychange事件来实现。

<input type='text' value='mooshine' id='mytxt'/>

<script>
var input=document.getElementById('mytxt');
if(window.addEventListener){
    input.addEventListener('input',function(){
        //do something you want
    },false);
}else{
    input.attachEvent('propertychange',function(p){
        if(p.propertyName=='value'){
            //do something you want
        }
    });
}
</script>

上面这段代码可以兼容IE8-浏览器做input/textarea元素value值得检测,因为IE9浏览器才支持addEventListener,跟oninput事件的支持版本是相同的,所以可以通过addEventListener来作为oninput的特性支持度的检测(当然这里是抛弃了opera浏览器的考虑,毕竟它也是凤毛麟角的存在)。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(677)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1