HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化

oninput 事件在用户输入时触发。

该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

提示: 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时才会触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

oninput 支持的HTML标签:<input type="password"><input type="search"><input type="text"><textarea>

浏览器支持:

Chrome fireFox Safari IE Opera
Yes 4.0 5.0 9.0 Yes

示例:

HTML:<input type="text" oninput="onInput()">JavaScript:<script type="text/javascript">function onInput() {console.log("正在输入...");}</script>或HTML:<input type="text">JavaScript:<script type="text/javascript">var oInput = document.querySelector("input");oInput.oninput = function () {console.log("正在输入...");};</script>或HTML:<input type="text">JavaScript:<script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$("input").on("input", function () {console.log("正在输入...");});</script>或<script type="text/javascript">// 同时绑定 input propertychange$('input').bind('input propertychange', function() {console.log("正在输入...");});</script>

更多专业前端知识,请上 【猿2048】www.mk2048.com

实时监听input输入框value的变化:相关推荐

  1. js实时监听input输入框值的变化以便即使匹配搜索项

    问题说明 在含有搜索框的网页中,经常需要及时匹配搜索项,因此需要监听input输入框的变化事件.如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,除了监听 ...

  2. 实时监听 input输入框值的变化 并响应动作

    html <input type="text" id="id"> jquery $("#id").bind('input pro ...

  3. angular监听输入框值的变化_angular 实时监听input框value值的变化触发函数方法

    用angulajs + ionic 做了一个登陆页面.效果要通过监听输入框的变化来判断登陆按钮是否可点击.当至少一个输入框为空时登录按钮不可点击.一开始是用的jquery的方法做的,后来发现刷新当前页 ...

  4. JavaScript 实时监听input 中值变化

    JavaScript 实时监听input 中值变化 在 <input> 标签中,添加属性 oninput ,oninput 事件在元素获得用户输入时发生. 当 <input> ...

  5. html 监听input输入框的值,利用原生JS实时监听input框输入值

    利用原生JS实时监听input框输入值 原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 ...

  6. java监听焦点事件_监听input输入框的失去焦点事件与按钮点击事件执行的顺序问题...

    1.问题描述 当在监听input失去焦点的事件的时候,在input输入框输入一段文字之后,点击发送按钮会发现,只触发了失去焦点事件,按钮点击事件并没有被触发,当再次点击按钮的时候,事件才会被触发 2. ...

  7. JQUERY实时监听INPUT输入值

    JQUERY方法: 方法原型: $(selector).bind(event,data,function,map) selector的语法参照jquery选择器语法 参数 描述 event 必需.规定 ...

  8. js 实时监听input中值变化

    摘自:http://blog.csdn.net/spy19881201/article/details/25537225 示例: <!DOCTYPE html> <html> ...

  9. vue实现实时监听文本框内容的变化(最后一种为原生js)

    一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

最新文章

  1. Improved Alpha-Tested Magnification for Vector Textures and Special Effects
  2. 34 linux监控平台
  3. 成功解决CatBoostError: Invalid type for cat_feature cat_features must be integer or string, real number
  4. Golang的日志记录器
  5. 关于操作 ASP.NET Web API的实例
  6. 重装ubuntu系统后VS Code远程连接失败
  7. C# 基础-CLR-类型【0】
  8. DLL分两种?用C#加载,有的成功,有的失败
  9. NFine框架因新增页面而显示无法链接资源
  10. EMG 3.0 QQ 机器人插件:wiki 问答系统
  11. 基于二分查询树(BinarySearchTrees)实现的键值对表(symbole-table)
  12. 《7天精通直播带货》运营型主播成长型,提升直播能力与技巧
  13. 困扰成都青年的20年癫痫在三博脑科医院终结
  14. 对于运维以及运维开发工程师的一些了解
  15. 云上部署oracle rac,在青云上部署oracle rac全过程
  16. 为什么上班只是坐着,一天下来还是觉得好累?
  17. MOS管一级代理 功成半导体 CPD50R1K1G3
  18. 流动比率liquidity rate解释
  19. Fiddler 插件 hook 参考代码
  20. mysql制作评论功能_Java+MySQL实现评论功能设计开发

热门文章

  1. linux启动weblogic指令,linux下如何启动和关闭weblogic .
  2. C++输出一句话里面第一个单词并大写
  3. 常见的集成逻辑门(CMOS\TTL\ECL)
  4. Android Studio is on board
  5. C#设计模式(2)——简单工厂模式
  6. Java集合类框架的基本接口有哪些?
  7. DHCP服务(dhcpd)
  8. Mac OS X 10.10如何打开虚拟内存
  9. 使用before、after伪类制作三角形
  10. (转)iReaper for wp7正式发布