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

最新推荐文章于 2021-06-03 19:15:32 发布

原创最新推荐文章于 2021-06-03 19:15:32 发布 · 8.9k 阅读

3 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#html5 #oninput #onchange #onproperty

前端专栏收录该内容

186 篇文章

订阅专栏

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">