在 Web 开发中经常会碰到需要动态监听输入框值变化的情况，如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话，监听不了右键的复制、剪贴和粘贴这些操作，处理组合快捷键也很麻烦。因此这篇文章向大家介绍一种完美的解决方案：结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。
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 监听输入框内容变化的示例代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<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> |
使用 jQuery 库的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码如下：
|
1
2
3
|
$('textarea').bind('input propertychange', function() {
$('.msg').html($(this).val().length + ' characters');
}); |
下面是 JsFiddle 在线演示，如果不能显示请刷新一下页面或者点击后面的链接（http://jsfiddle.net/PVpZf/）：
<iframe style="margin: 0px; padding: 0px; border-style: none; width: 898.4375px; height: 250px;" src="http://jsfiddle.net/PVpZf/embedded/" frameborder="0" width="320" height="240"></iframe>
最后需要注意的是：oninput 和 onpropertychange 这两个事件在 IE9 中都有个小BUG，那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发，而 IE 其他版本都是正常的，目前还没有很好的解决方案。不过 oninput & onpropertychange 仍然是监听输入框值变化的最佳方案，如果大家有更好的方法，欢迎参与讨论。
参考资料：
相关推荐
在这个资源中，我们将介绍 JS 与 jQuery 实时监听输入框值的 oninput 与 onpropertychange 方法，并通过实例分析了 oninput 与 onpropertychange 实现下拉框里自动匹配关键字实时监听文本框 value 值变化的功能。...
主要介绍了js与jquery实时监听输入框值的oninput与onpropertychange方法,实例分析了oninput与onpropertychange实现下拉框里自动匹配关键字实时监听文本框value值变化的功能,需要的朋友可以参考下
oninput 事件可以在输入框值发生变化时被触发，可以实时监听输入框值的变化。但是，在将oninput 事件注册到输入框时，需要注意浏览器的差异。在IE下，可以使用attachEvent 方法来注册事件，而在其他浏览器中，需要...
例如，演示了如何利用oninput事件监听输入框的实时输入，并根据输入内容动态更新页面上的其他元素。同时，使用jQuery绑定了oninputpropertychange事件，显示了在输入过程中实时获取输入框长度，并根据输入值是否存在...
实时监听输入框值变化是Web开发中常见需求之一，特别是在需要即时校验用户输入内容或者响应用户行为时，此功能显得尤为重要。 2. **绑定oninput和onpropertychange事件**： - `oninput`事件在输入框内容改变时...
在前端开发中，实时监听输入框值的变化是一项非常重要的技能。这通常可以实现为网站或应用程序提供更好的用户体验，例如自动补全、搜索建议、显示已输入字节数等功能。要实现这些功能，JavaScript 提供了几个事件...
### JavaScript 监听 Input 输入框值的实时变化 #### 知识点概览 1. **事件绑定方式**：理解并应用多种事件绑定方法（原生 JavaScript、jQuery）。 2. **兼容性处理**：针对不同浏览器（如 IE）采用不同的事件绑定...
`oninput`事件在输入框的值发生变化时触发，而`onpropertychange`事件则在DOM属性发生改变时触发，例如输入框内容的变化。需要注意的是，在IE浏览器中，`onpropertychange`事件会比`oninput`触发得更频繁，而在标准...
在JavaScript中，`onchange`、`onpropertychange` 和 `oninput` 是与用户交互相关的事件，它们各自有特定的触发条件，特别是在处理表单元素的键盘输入和JavaScript动态赋值时。以下是对这三个事件的详细解释： 1. `...
现代浏览器普遍支持`oninput`事件，它可以用来监听用户在`<input>`框中的输入变化。 ```javascript document.getElementById("input").addEventListener("input", function(event) { console.log("输入变化:", ...
总结来说，onpropertychange和oninput事件在处理输入框的字符统计和实时显示剩余字符数的场景中非常实用。它们可以帮助开发者实时监控和响应用户的输入行为，配合JavaScript和CSS，可以灵活地实现各种用户界面的反馈...
这两个事件处理函数都是用来监听输入框内容的变化，但它们在浏览器兼容性上有不同。 1. `oninput`事件： `oninput`事件在HTML5中被引入，当用户输入内容导致输入框的值发生变化时触发。这个事件不仅适用于文本...
总而言之，虽然`onpropertychange`在IE浏览器中提供了一种强大的实时输入事件监听方式，但为了保证网站的兼容性和用户体验，我们应当根据不同的浏览器环境，灵活使用`oninput`以及其他事件来实现输入框内容变化的...
在JavaScript中，处理DOM元素状态变化的事件有多种，其中包括`onpropertychange`、`onchange`和`oninput`。这些事件在不同浏览器中有着不同的表现和兼容性，尤其是在Internet Explorer (IE) 和 Firefox之间。 `...
因此，对于需要实时监听元素属性变化的情况，`onpropertychange` 是一个非常实用的选择。例如，当文本框的`value`属性被脚本动态修改时，`onchange` 无法捕获，但 `onpropertychange` 却可以。 下面是一个使用 `...
最后，文章中还提到了JavaScript的相关内容，主要是关于如何在前端实时监听输入框的值变化，使用`oninput`和`onpropertychange`事件，以及如何使用正则表达式限制输入框允许输入的字符。这些技术可以帮助我们进一步...
这些方法主要适用于旧版的IE浏览器，现代浏览器如Chrome、Firefox通常使用`oninput`事件来代替`onpropertychange`，因为`oninput`事件在所有浏览器中都有较好的兼容性，并且能更准确地捕获用户输入的变化。...