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

    版权声明:本文原创发表于博客园,作者为丁学
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。
  • 相关阅读:
    fedora上部署ASP.NET——(卡带式电脑跑.NET WEB服务器)
    SQL Server 请求失败或服务未及时响应。有关详细信息,请参见事件日志或其它适合的错误日志
    8086CPU的出栈(pop)和入栈(push) 都是以字为单位进行的
    FTP 服务搭建后不能访问问题解决
    指定的 DSN 中,驱动程序和应用程序之间的体系结构不匹配
    Linux 安装MongoDB 并设置防火墙,使用远程客户端访问
    svn Please execute the 'Cleanup' command. 问题解决
    .net 操作MongoDB 基础
    oracle 使用绑定变量极大的提升性能
    尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,将出现此问题。
  • 原文地址:https://www.cnblogs.com/goody9807/p/1273774.html
Copyright © 2020-2023  润新知