JavaScript 实时监听input中值变化

简介: 代码方式一: 测试 $(function () { $(".et-name").
代码

方式一:

<!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值发生改变时奏效。

目录
相关文章
|
2月前
|
JavaScript
在 Vue.js 中使用 watch 来监听对象属性的变化
在 Vue.js 中使用 watch 来监听对象属性的变化
|
5月前
|
JavaScript 前端开发
JS如何配合input框实现模糊搜索
JS如何配合input框实现模糊搜索
155 2
|
9天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
27 0
|
17天前
|
JavaScript 前端开发 API
JavaScript全屏,监听页面是否全屏
JavaScript全屏,监听页面是否全屏
36 0
|
3月前
|
JavaScript 前端开发 API
js全屏,监听页面是否全屏
js全屏,监听页面是否全屏
60 4
|
3月前
|
JSON JavaScript 前端开发
使用js实现input框的模糊搜索
使用js实现input框的模糊搜索
30 0
|
5月前
|
JavaScript
【干货】JS 限制input文本框输入
【干货】JS 限制input文本框输入
43 1
|
5月前
|
JavaScript 前端开发
JS的监听事件
JS的监听事件
|
4月前
|
测试技术 API Android开发
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
|
4月前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
498 0