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内部到底发生了什么才导致如此搞笑?

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值