您现在的位置是：首页 > 文章详情

JavaScript 实时监听input中值变化

日期：2018-05-14点击：492收藏

代码

方式一：

<!DOCTYPE html>
<html>
<head>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <title>测试</title>
</head>
<body>
    <input class="et-name" type="input" name="name">

    <script type="text/javascript">
        $(function () {
            $(".et-name").bind("input propertychange", function () {
                console.log($(".et-name").val());
            });
        });
    </script>
</body>
</html>

方式二：

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
</head>
<body>
    <input class="et-name" type="input" name="name" oninput="myFun()">

    <script type="text/javascript">
        function myFun() {
            console.log($(".et-name").val());
        }
    </script>
</body>
</html>

方式三：

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
</head>
<body>
    <input class="et-name" type="input" name="name" onchange="myFun()">

    <script type="text/javascript">
        function myFun() {
            console.log($(".et-name").val());
        }
    </script>
</body>
</html>

类似于，实现微博的‘还能输入xxx个字符’

oninput,onpropertychange,onchange的用法

onchange触发事件必须满足两个条件：
a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
b）当前对象失去焦点(onblur)；
onpropertychange的话，只要当前对象属性发生改变，都会触发事件，但是它是IE专属的；
oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。

原文链接：https://yq.aliyun.com/articles/663325

关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源。