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

JavaScript 实时监听input中值变化

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

代码

方式一：

<!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业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

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