IE对input元素onchange事件的支持BUG

发布于 2022-10-15 10:08:10 字数 3036 浏览 24 评论 0

经测试，最后发现是IE对input元素的onchange事件支持有问题，下面来看代码：

view sourceprint?

<html>
<head>
<title>IE对input列素onchange事件的支持BUG测试</title>
<script type="text/javascript">
function showTip(){
document.getElementById("Tip").style.display="inline";
}
</script>
</head>
<body>
<div style="width:400px;">
<input type="text" name="txt1" onchange="showTip()">
<span id="Tip" style="display:none;">这里是提示信息，在页面加载时时是隐藏的</span><br>
这行字用来显示到页面上<br>
<input type="text" name="txt2">
</div>
</body>
</html>

复制代码运行上面的代码，在第一个文本框里随便输出些什么，然后用鼠标点击第二个文本框，看光标的位置，按下Backspace键试试，问题出现！然后重新打开页面，焦点移到第一个文本框里，不输入任何东西然后点击第二个文本框，问题没有出现。

按一般理解上的意义来说，onchange应该是在文本框里内容有变化时发现，就是每输入一个字符都应该触发一次，然而结果却表明IE是在输入时并没有触发，而是在input失去焦点时触发了onchange事件，“基本等同于”onblur事件，但onblur事件却没有这个BUG，说明IE对onchange支持有问题。

上面的代码现BUG后，光标停留在“这行字用来显示到页面上”这一行的后面，这一行的位置在触发事件前本是第二个文本框所在位置，难道IE只记住了位置？再试一下，把代码中的div宽度缩小为200px，再试一次，BUG重现，而且由于Tip出来的字折了两次行，所以光标停留在“这里是提示信息，在页面加载时时是隐藏的”这一行的后面，光标所在位置还是刚才第二个文本框所在的位置，看来，当onchange事件发生时，IE记住了鼠标点击的位置，而且记住了鼠标点击的元素将是一个input，而在这之后才执行了onchange事件指定的操作，很不幸，IE原来记住的位置已经不是原来的input了，但IE却没有理会，继续着它的操作，于是就出现了问题

虽然光标停留在那个位置，可以输入东西，可以用Backspace删除，但却不能够用方向键控制光标的移动，Backspace可以使光标向后移，但除了输入字符就再没办法让光标向前移。当提示文字折两行以上时，光标并不是停到整个提示文字的最后面，而是原来文本框所在的那一行，这时候用 Backspace删除时，其实是实现的Del键操作，并没有删除前面的东西，而是删除了后面的字符，直到后面不再有字符才开始删除前面的元素，在任意位置打一个回车进去，当前位置都会出现一个空行，而这时，光标被移到了每二个文本框里

==================================

Bug解决：

input按钮可以绑定onpropertychange和onchange事件来解决这个问题。

比如

var input_text=document.getElementById("input_text");

input_text.onchange=function(){/*执行函数*/};

input_text.onpropertychange=input_text.onchange;

分享到QQ

分享到微博