AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

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

2014-03-24 3205
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： (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/
文章标签：
JavaScript
Web App开发
前端开发
iOS开发
y0umer
目录
相关文章
游客dng4gjyb342he
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
游客dng4gjyb342he
1119 5
明月何时照我还呀
|
JavaScript
在 Vue.js 中使用 watch 来监听对象属性的变化
在 Vue.js 中使用 watch 来监听对象属性的变化
明月何时照我还呀
1553 63
恩爸编程
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术，无需游戏框架支持。通过下载项目文件至本地，双击index.html即可启动贪吃蛇游戏。游戏界面简洁，支持方向键控制蛇移动，空格键实现游戏暂停与恢复功能。
恩爸编程
801 14
哈你真皮
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件，可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
哈你真皮
352 5
神明木佑
|
JavaScript 前端开发 开发者
jQuery：JavaScript库的瑰宝
jQuery：JavaScript库的瑰宝
神明木佑
441 3
cqtianxin1
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
cqtianxin1
212 1
哈你真皮
|
JavaScript 前端开发
jquery输入框键入文字动画特效
这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时，通过jquery代码来制作文字的动画效果，非常炫酷。
哈你真皮
318 0
疯狂的猿
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图，默认左侧是页面主要内容，minimap.js的好处就是在它的右侧形成一个快速定位通道，产生一个缩小版的页面，即预览效果，可以点击并快速定位到页面的某个位置。简单实用，欢迎下载！
疯狂的猿
342 0
邹荣乐
|
JavaScript API
深入解析JS中的visibilitychange事件：监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件：监听浏览器标签间切换的利器
邹荣乐
1383 0
Star时光
|
JavaScript 前端开发 API
深入了解jQuery：快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery：快速、高效的JavaScript库
Star时光
420 0

热门文章

最新文章

  • 1
    前端javascript练习题Ajax封装
  • 2
    【Node.js 版本过高】运行前端时，遇到错误 `Error: error:0308010C:digital envelope routines::unsupported`
  • 3
    JavaScript 开发进阶：理解 JavaScript 作用域和作用域链（上）
  • 4
    JavaScript之数组
  • 5
    Case 5 一键安装JS SDK 网页版WebRTC 网页 SIP客户端 语音通话，可以做web坐席
  • 6
    JavaScript变量和数据类型
  • 7
    高效打造跨平台桌面应用：Electron加载服务器端JS
  • 8
    JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据
  • 9
    如何在 Node.js 项目中使用 Prettier 进行代码格式化
  • 10
    做数据可视化，为什么我们不再直接使用D3.js、Echarts
  • 1
    JQuery选择器以及对象
    396
  • 2
    jquery无限循环内容滑块插件
    393
  • 3
    jQuery响应式内容选项卡插件
    371
  • 4
    简单轻量级的jquery图表插件
    412
  • 5
    jQuery Slidorion自动切换选项图片轮播的手风琴效果
    448
  • 6
    jqtimeline.js-简单又好用的jquery时间轴插件
    1119
  • 7
    百叶窗效果的jQuery幻灯片插件
    429
  • 8
    带完成百分比的jQuery表单插件
    345
  • 9
    支持多种动画特效的响应式jQuery幻灯片插件
    460
  • 10
    jQuery超酷3D包装盒封面旋转特效
    435

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • jQuery开发教程

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！