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

昨天发现VS的验证控件会造成IE出现一个超级搞笑的BUG(由验证控件引起的IE的超级爆笑BUG ),因为VS生成的代码中有N多Javascript,当时也没空去看到底是哪里出的问题,今天早上醒得太早了,终于有时间看看到底是什么原因了。

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

<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键操作,并没有删除前面的东西,而是删除了后面的字符,直到后面不再有字符才开始删除前面的元素,在任意位置打一个回车进去,当前位置都会出现一个空行,而这时,光标被移到了每二个文本框里

试过几个版本的IE和一些IE内核的其他浏览器,都存在这个问题,看来是历史遗留问题了,期待着强人出来研究一下onchange事件触发时,IE内部到底发生了什么才导致如此搞笑?

版权声明:本文原创发表于博客园,作者为丁学
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。
posted @ 2008-08-22 09:41  PointNet  阅读(1656)  评论(3编辑  收藏  举报