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

爱被打了一巴掌 2022-04-01 10:12 183阅读 0赞

昨天发现VS的验证控件会造成IE出现一个超级搞笑的BUG（[由验证控件引起的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内部到底发生了什么才导致如此搞笑？

[IE_BUG]: http://www.cnblogs.com/dingxue/archive/2007/03/22/683401.html