js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange-阿里云开发者社区

开发者社区> y0umer> 正文

js/jquery 实时监听输入框值变化的完美方案：oninput & onpropertychange

2014-03-24 2156

简介： (1) 先说jquery, 使用 jQuery 库的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码： $('#username').

+关注继续查看

(1) 先说jquery, 使用 jQuery 库的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码：

$('#username').bind(

'input
 propertychange'

, function() {

$('#content').html($(this

).val().length
 +

' characters');

});

(2)　对于JS原生写法而言， oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下：

　　

　　从上面表格可以看出，oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：

修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
修改了 select 元素的选中项，selectedIndex 属性发生变化。

　　在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

　　集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下：

<head>

    <script type="text/javascript">
    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
        function OnInput (event) {
            alert ("The new content: " + event.target.value);
        }
    // Internet Explorer
        function OnPropChanged (event) {
            if (event.propertyName.toLowerCase () == "value") {
                alert ("The new content: " + event.srcElement.value);
            }
        }
    </script>
</head>
<body>
    Please modify the contents of the text field.
    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
</body>

http://blog.163.com/lgh_2002/blog/static/44017526201341511112874/

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

Web App开发 JavaScript iOS开发前端开发

javascript前端开发css web前端开发javascript javascript web前端教程 javascript web前端分享 java类成员

开发者社区 > 开发与运维 > 文章

作者高分内容

更多

我回来了.... 1059 即将放出ITSEC第一期所有培训视频 1421 [ITSEC]信息安全·Web安全培训第一期客户端安全之UBB系列 1470 System.Runtime.InteropServices.COMException: Exception from HRESULT: 0x800AC472 1813 ITSEC TEAM 2013培训公开视频 974

相关文章

阿靖哦

Python3入门（九）输入和输出

python输入和输出

2185 0

凌浩雨

JavaScript 实时监听input中值变化

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

828 0

it徐胖子

Android开发14——监听内容提供者ContentProvider的数据变化

962 0

天飞

ExtJs之文本框及数字输入

1398 0

cometwo123

js动态提示输入框剩余字符数

1580 0

开发者社区

logstash-input-jdbc实现mysql 与elasticsearch实时同步深入详解

如何尽量不改变原有数据库表结构，将这些数据的insert,update,delete操作结果实时同步到elasticsearch(简称ES)呢？本文基于以上需求点展开实战讨论。

497 0

微wx笑

js只允许输入数字和小数点

//示例代码： //只允许输入数字与.: //只允许输入数字 : //只允许输入数字与小数点 function checkKeyFo...

537 0

异步社区

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.9　技巧：监听Mobile事件

第4章解释了如何在Web浏览器中捕获标准的事件。Mobile设备使用的是“触摸手势”（touch gesture）而不是鼠标移动。jQuery Mobile对此进行了抽象。代码清单9-10演示了如何捕获一组挑选出来的典型的Mobile事件：轻击（tapping）、滑动（swiping）、方向变化（orientation change）以及页面变化（page change）。

1415 0

开发者社区

logstash-input-jdbc实现oracle 与elasticsearch实时同步详解

logstash-input-jdbc实现mysql 与elasticsearch的解读之前博文已经解析。本次只是在原有的基础上，针对oracle特性部分做解读。

2456 0

余二五

输入数字计算位数

891 0

+关注

y0umer

高级网络安全技术员

906

文章

0

问答

作者高分内容

更多

我回来了.... 1059 即将放出ITSEC第一期所有培训视频 1421 [ITSEC]信息安全·Web安全培训第一期客户端安全之UBB系列 1470 System.Runtime.InteropServices.COMException: Exception from HRESULT: 0x800AC472 1813 ITSEC TEAM 2013培训公开视频 974

文章排行榜

最热

最新

1 免费下载|《Top20低代码实践案例》独家上线数据互通、降本提效、企业数字化变身的秘密都在这里！ 168526

2 13个实验带你玩转MaxCompute SQL之JSON操作 161078

3 实战：使用Spring Boot Admin实现运维监控平台 121793

4 阿里云丨洛神·云网络发布业界首本《云计算公网质量白皮书》 34480

5 深入浅出时序数据库 – 智能互联系统基础设施 21569

6 我与阿里云IoT的故事 20620

7 独家下载！认知智能大咖观点最新出炉！带你揭秘强大技术背后的影响力！ 14515

8 认证故事|我与阿里云认证的故事#学考故事 110171

9 信不信十分钟让你彻底搞懂java反射 15549

10 一个demo让你彻底理解线程池工作流程 16092

11 印象最深的一个bug——排查修复问题事件BEX引发的谷歌浏览器闪退崩溃异常 28567

12 synchronized底层实现原理（保证看懂） 14911

13 redis淘汰策略及3.x与4.x区别 14868

14 String str = new String(“abc“)到底new了几个对象 14701

15 八旬老人废寝忘食，只为学会Java快速排序，今天他终于学会了 14503

16 二叉树的三种遍历方式，含demo（递归与非递归） 14440

17 并发编程实践之公平有界阻塞队列实现 30283

18 java睡眠排序 14284

19 新手建站就用这个方法，无需购买服务器10分钟快速部署你的静态网页 14768

20 阿里云发布云原生加速器，携手生态企业拥抱数字时代 15248

1 关于“冬季实战营第一期”的学习报告 68

2 工商银行实时大数据平台建设历程及展望 281

3 产业白热化竞争来临，看人工智能如何带动经济数智化发展 67

4 冬季实战营第一期：从零到一上手玩转云服务器 1422

5 学习报告——冬季实战营第一期：从零到一上手玩转云服务器 59

6 来更快的Maven了，我的天，速度提升了8倍！（1） 56

7 征文投稿丨使用轻量应用服务器搭建扫码测试项目 77

8 谈谈前端水印实现的几种方式 65

9 Datastream 开发打包问题 69

10 2021云上架构与运维峰会演讲合集 72

11 项目中如何优雅的消除if-else 96

12 零基础如何上手APICloud App、小程序多端开发 53

13 使用无影云当做自己的第二台电脑 51

14 初识阿里云E-MapReduce ClickHouse，到底有哪些优势？ 94

15 自建Hadoop集群 VS 阿里云EMR，差距居然这么大？ 93

16 阿里云EMR到底是什么？一图带你深入了解！ 95

17 一图看懂 | 2021阿里云混合云的高能时刻 87

18 农民工玩转无影云电脑 121

19 “Haas物联网设备云端一体极客大赛”入选2021中国最受开发者欢迎技术活动 73

20 30人的产研团队如何高效协同？ 197

相关电子书

更多

《2021云上架构与运维峰会演讲合集》

立即下载

《零基础CSS入门教程》

立即下载

《零基础HTML入门教程》

立即下载