http://www.koyoz.com/blog/?action=show&id=225
用onpropertychange,oninput事件解决onchange事件的不足.
onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性!
在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.
这样一来问题就解决了.
那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了.
但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效.
好了, 以下是演示例子, 主流浏览器都没问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>on用onpropertychange,oninput事件解决onchange事件的不足 by koyoz.com</title>
<style type="text/css">
*{font-size:14px;font-family:'Comic Sans MS', Verdana}
body {margin-left:20px}
</style>
</head>
<body>
<p>使用onchange事件: </p>
<input type="text" id="txt1" />
<p>使用onpropertychange/oninput事件: </p>
<input type="text" id="txt2" />
<p>结果:</p>
<input type="text" id="txt" />
<script type="text/javascript">
var $ = function(o) {
return document.getElementById(o)
};
$('txt1').onchange = function() {
$('txt').value = this.value;
}
$('txt2').onpropertychange = function() {
$('txt').value = this.value;
}
if (window.addEventListener) {
$('txt2').addEventListener('input', function() {$('txt').value = this.value}, false);
}
</script>
</body>
</html>
相关推荐
onchange在用于文本框输入框时,有一个明显的不足....但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效. 好了, 以下是演示例子, 主流浏览器都没问题: on用onpropertychange,oni
在 Web 开发中，了解 oninput、onpropertychange、onchange 三个事件的用法和区别非常重要，这三个事件都是用于检测用户输入的变化，但它们之间存在着一些关键的差异。 首先，让我们来了解 onchange 事件。当 ...
在JavaScript中，`onchange`、`onpropertychange` 和 `oninput` 是与用户交互相关的事件，它们各自有特定的触发条件，特别是在处理表单元素的键盘输入和JavaScript动态赋值时。以下是对这三个事件的详细解释： 1. `...
JavaScript 监听输入框值的即时变化 ...监听输入框值的即时变化可以使用onpropertychange 事件或oninput 事件来实现，但是需要注意浏览器的差异性问题，使用不同的事件和注册方法来适应不同的浏览器类型。
在JavaScript中，处理DOM元素状态变化的事件有多种，其中包括`onpropertychange`、`onchange`和`oninput`。这些事件在不同浏览器中有着不同的表现和兼容性，尤其是在Internet Explorer (IE) 和 Firefox之间。 `...
文章提到，IE9以下版本不支持oninput事件，可以使用onpropertychange作为替代方案。 文中还包含了一些关于如何在实际项目中应用这些监听事件的示例代码。例如，演示了如何利用oninput事件监听输入框的实时输入，并...
1. onchange事件与onpropertychange事件的区别： onchange事件在内容改变（两次内容有可能相等）且失去焦点时触发...onpropertychange事件是任何属性改变都会触发，而oninput却只在value改变时触发，oninput要通过addEv
结合上述知识点，我们可以编写一个示例代码，该代码不仅可以在非 IE 浏览器中使用 `oninput` 事件，还能在 IE 浏览器中使用 `onpropertychange` 事件。这样就可以为不同的浏览器用户提供一致的体验： ```html <!...
在JavaScript中，`onchange` 和 `onpropertychange` 是两个不同的事件处理方式，它们各自在特定场景下有着不同的用途。本文将详细讲解这两个事件的区别以及如何解决 `onchange` 事件在某些情况下的无效问题。 `...
当一个HTML元素的属性改变的时候，都能通过onpropertychange来捕获。例如< input name=”text1″ id=”text1″ />对象的value属性被页面的脚本修改的...firefox的事件oninput，效果和IE的onproperchange相同。
然后，开发者注意到`oninput`事件，网上普遍认为在Firefox中`oninput`与IE的`onpropertychange`效果相同，但实际上并不完全一致。`oninput`事件仅在用户直接输入导致value值变化时触发，而通过JavaScript改变value值...
3. **使用oninput事件**：oninput事件提供了最佳的用户体验，它在用户输入的当下立即触发。适用于需要实时响应输入内容的场景。 4. **使用onpropertychange事件（已废弃）**：在旧版IE浏览器中，onpropertychange...
本篇“JavaScript学习笔记”针对JavaScript中一些实用的技巧进行了总结，特别是在事件监听以及属性获取方面，涵盖了onchange、onpropertychange、oninput等事件以及button标签的type属性、jQuery处理href属性兼容性...
onpropertychange事件是主要在IE浏览器中使用的事件，它的效果与oninput相似，但是其适用性仅限于IE浏览器。由于跨浏览器兼容性问题，使用onpropertychange事件的代码可能在非IE浏览器中无法正常工作。此外，...
此外，开发者还可以使用oninput事件作为备选方案，但在使用时需要注意其与onchange事件触发时机的差异。随着Web技术的不断进步，新的API和方法将不断涌现，开发者需要不断学习并掌握这些新知识，以保持开发效率和...