js ie input onchange事件兼容BUG

最新推荐文章于 2019-06-24 18:04:24 发布

转载最新推荐文章于 2019-06-24 18:04:24 发布 · 387 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/frostbelt/archive/2012/03/10/2388718.html

文章标签：

#javascript #ViewUI

本文探讨了在网页中使用input按钮绑定onpropertychange和onchange事件以解决特定问题的方法，详细介绍了这两种事件的特性及在不同浏览器中的表现，并通过实例代码展示了如何正确使用这些事件。同时，文章还揭示了在特定情况下onpropertychange事件触发的意外行为，包括页面加载时触发的问题，以及其与onchange事件在IE浏览器中的差异。

input按钮可以绑定onpropertychange和onchange事件来解决这个问题。
比如
var input_text=document.getElementById("input_text");
input_text.onchange=function(){/*执行函数*/};
input_text.onpropertychange=input_text.onchange;

实践证明，上述办法不能解决问题：

onchange事件是在键盘输入，失去焦点时候如果值改变就触发该事件（ie和火狐效果一样），用js赋值时不会触发

onpropertychange只要值改变都会触发，无论是键盘输入还是js赋值改变都会触发，只在IE下有效

但即使在IE下，也有问题，在打开页面未做任何操作时，就触发一次onpropertychange事件，难道dom加载input也算是修改了input.value吗？

<input id="inputTest" type="text" value="" />
<button onclick="changeContent()">click me</button>
<script type="text/javascript">
var input=document.getElementById("inputTest");
input.onchange=function(){  //ie ff都是键盘输入使input内容改变且失去焦点时触发
	alert(this.value);
}
input.onpropertychange=function(){  //ff不管  ie页面打开时触发，改变input时触发，不必失去焦点（大小写强制转化应该就是用它）
	alert("pro"+this.value);
}
function changeContent(){
	input.value="被点了";
}
</script>

还请路过的高手指教！

转载于:https://www.cnblogs.com/frostbelt/archive/2012/03/10/2388718.html