html5标准事件oninput实现输入检测

       以往我们实现input的输入监听用到的无非是onkeyup、onkeydown、onchange,但是这些都有着一些不好的用户体验。比如onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效;而onkeydown、onkeyup在处理复制、粘贴、拖拽、长按键(按住键盘不放)等细节上并不完善。

       onpropertychange属性可在某些情况下解决上面存在的问题,不用考虑是否失去焦点,不管js操作还是键盘鼠标手动操作,只要HTML元素属性发生改变即可立即捕获到。遗憾的是,onpropertychange为IE专属的。其他浏览器下如果想要实现这一实时监听的需求,就要用到HTML5中的标准事件oninput,不过IE9以下的浏览器是不支持oninput事件的。如果要兼容IE9以下浏览器,就需要oninput和onpropertychange一起使用。

如下实例:

!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="Author" content="神棍、Falost">
        <title>hello world!</title>
        <style type="text/css">
            #box{
                width:100%;
                height:30px;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <input type="text" oninput="Monitor(this)" onpropertychange="Monitor(this)"/>
        
        <script type="text/javascript">
            function Monitor(t){
                console.log(t.value)
                var box = document.getElementById('box')
                box.innerHTML = '你当前输入的是:'+ t.value
            }
        </script>
    </body>
</html>


实时监听input中输入内容的变化。

 

posted @ 2017-04-01 16:26  尔夫  阅读(3270)  评论(0编辑  收藏  举报