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

最新推荐文章于 2024-06-23 00:55:54 发布

weixin_34218890

最新推荐文章于 2024-06-23 00:55:54 发布

阅读量378

点赞数 1

原文链接：http://www.cnblogs.com/zhaoleilei/p/6656486.html

版权

以往我们实现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" οninput="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中输入内容的变化。

转载于:https://www.cnblogs.com/zhaoleilei/p/6656486.html

weixin_34218890

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5标准事件oninput实现输入检测

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

扫一扫