zoukankan      html  css  js  c++  java
  • 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="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内部到底发生了什么才导致如此搞笑?

    版权声明:本文原创发表于博客园,作者为丁学
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。
  • 相关阅读:
    原来是板子的硬件问题
    最简单的helloworld模块编译加载(linux3.5内核源码树建立)
    排序学习笔记
    配置开发环境遇到的一些问题及解决方法
    .NET基础之GridView控件
    .NET之页面数据缓存
    .NET基础之Calendar控件
    【转帖】DIV+CSS完美兼容IE6/IE7/FF的通用方法
    ADO.NET()Command
    .NET基础之DataList控件
  • 原文地址:https://www.cnblogs.com/goody9807/p/1273774.html
Copyright © 2011-2022 走看看