oninput
onpropertychange
Tip

在开发中经常会碰到需要动态监听输入框值变化的情况，如果使用 onkeydown、onkeypress、onkeyup 这几个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。
所以，我们可以结合 HTML5 标准事件和 IE 专属事件 onpropertychange 事件来监听输入框值的变化。

oninput

oninput 是 HTML5 的标准事件，对于监测 textarea、input:text、input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。oninput 事件的兼容情况如下：

这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：
修改了 input:checkbox 或者 input:radio 元素的选中状态，checked 属性发生变化。
修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
修改了 select 元素的选中项，selectedIndex 属性发生变化。

onpropertychange

IE 下，当一个 HTML 元素的属性改变的时候，都能通过 onpropertychange 来即时捕获。

var input = document.getElementById("input");
input.onpropertychange = function(){console.log("s++");
}

Tip

1、onchange 事件与 onpropertychange 事件的区别：
onchange 事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；onpropertychange 事件却是实时触发，即每增加或删除一个字符就会触发，通过 JavaScript 改变也会触发该事件，但是该事件 IE 专有。

2、oninput 事件与 onpropertychange 事件的区别：
oninput 事件是 IE 之外的大多数浏览器支持的事件，在 value 改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过 JavaScript 改变 value 时，却不会触发；onpropertychange 事件是任何属性改变都会触发的，而 oninput 却只在 value改变时触发，oninput 要通过 addEventListener() 来注册，onpropertychange 注册方式跟一般事件一样。（此处都是指在 JavaScript 中动态绑定事件，以实现内容与行为分离）

3、oninput 与 onpropertychange 失效的情况：
（1）oninput事件：
a). 当脚本中改变 value 时，不会触发；
b). 从浏览器的自动下拉提示中选取时，不会触发。
（2）onpropertychange 事件：当 input 设置为 disable = true 后，onpropertychange 不会触发。

—————————(正文完)————————————
一个前端的学习交流群，想进来面基的，可以点击这个logo，或者手动search群号：685486827

写在最后：约定优于配置——-软件开发的简约原则.

——————————– (完)————————————–

我的：
个人网站： https://neveryu.github.io/neveryu/
Github： https://github.com/Neveryu
新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博….

width="100%" height="500" class="share_self" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=1&ptype=1&speed=0&skin=8&isTitle=1&noborder=1&isWeibo=1&isFans=0&uid=5346488237&verifier=d529ff3a&dpc=1">

实时监听输入框值变化：oninput onpropertychange相关推荐

实时监听输入框值变化的完美方案：oninput onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange 原文:实时监听输入框值变化的完美方案:oninput & onpropertychange 在 W ...
jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
asp.net监听输入框值的即时变化onpropertychange、oninput
要达到的效果很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的 ...
6- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 标题: js监听输入框值的即时变化onpropertychange.oninput事件参考: http://m.jb51. ...
angular监听输入框值的变化_angular 实时监听input框value值的变化触发函数方法
用angulajs + ionic 做了一个登陆页面.效果要通过监听输入框的变化来判断登陆按钮是否可点击.当至少一个输入框为空时登录按钮不可点击.一开始是用的jquery的方法做的,后来发现刷新当前页 ...
javascript监听输入框_html通过JS/jQuery实现实时监听输入框input的内容
最近在做一个功能:联想搜索功能.具体实现做法如下:通过实时监听输入框input的内容,来实时发起网络请求,向后台获取联想到的搜索内容并展示到前台.那么该如何实现input的实时监听呢做法一(jQue ...
JS实时监听DOM元素变化 - MutationObserver
使用 MutationObserver API实时监听DOM元素变化创建 MutationObserver 实列,接受一个用于监听到DOM元素变化的回调函数 const handleListenCh ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案) 参考文章: (1)onchange监听inpu ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法
1. onchange事件监听input值变化的使用方法: <input id="test"></input>$("input").ch ...
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)...
转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...

实时监听输入框值变化：oninput onpropertychange

oninput

onpropertychange

Tip

实时监听输入框值变化：oninput onpropertychange相关推荐

最新文章

热门文章