浏览器之家


IE浏览器Button元素的Bug

button元素在过去一直没有被重视,其实它比<input type="button">的语义强许多,制定性也好许多。不过IE浏览器的button元素存在一个可怕的bug。它总是把其innerHTML神经错乱地当成其value值,因此,如果用它来提交表单时,可能产生一些负作用,会把正确的键值对覆盖了。

 
<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" <a class="fllink" href="http://whatis.ctocio.com.cn/searchwhatis/403/5947403.shtml" target="_bank">content</a>="IE=7">
    <title>button <a class="fllink" href="http://whatis.ctocio.com.cn/searchwhatis/325/5947825.shtml" target="_bank">element</a> bug by 司徒正美</title>
    <<a class="fllink" href="http://whatis.ctocio.com.cn/searchwhatis/425/5948925.shtml" target="_bank">script</a> src="http://common.cnblogs.<a class="fllink" href="http://whatis.ctocio.com.cn/searchwhatis/307/5947307.shtml" target="_bank">com</a>/script/jquery.js" type="<a class="fllink" href="http://whatis.ctocio.com.cn/searchwhatis/162/6092662.shtml" target="_bank">text</a>/javascript"></script>
    <script type="text/javascript" charset="utf-8">
      window.onload = function(){
        var el = document.getElementById("bb");
        alert(el.getAttribute("value"))
        alert("下面是jQuery1.3.2取得的值");
        alert($("#bb").attr("value"))
        alert($("#bb").val())
    }
    </script>
  </head>
  <body>
<button value="正确的值" id="bb">
  <span style="color:red;">错误的值</span>
</button>

  </body>
</html>
 

这恶性bug即使是jQuery1.3.2也没有修正它,因此不要迷信jQuery。不过,这bug也不是那么难修正的。如果光是想获得正确的value值,我们可以简单地使用如下代码:

var el = document.getElementById("bb");
el.attributes["value"].nodeValue

 
<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7">

评论

没安装畅言模块