IE的button元素bug

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

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

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

如果是提交表单时，就有点麻烦了。为了对比效果，我把错误的提交也做成例子了。留意以下运行框，点击按钮后如果地址栏的location search是nasami=correct_submit，说明提交成功，如果是nasami=error_submit，说明提交了错误的值了。

加上修正脚本之后……

<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <title>button element bug by 司徒正美</title>
    <script type="text/javascript" charset="utf-8">
      //此bug存在于IE5,IE5.5,IE6,IE7,修正于IE8 beta1，早期版本可用以下脚本修正！
      if(!+"\v1"){
        window.attachEvent("onload", function(){
          var buttons = document.getElementsByTagName('button');
          for (var i=0; i<buttons.length; i++) {
            if(buttons[i].onclick) continue;
            buttons[i].onclick = function () {
              for(var j=0,n=this.form.elements.length; j<n; j++)
                if( this.form.elements[j].tagName == 'BUTTON' )
                  this.form.elements[j].disabled = true;
              this.disabled=false;
              this.value = this.attributes["value"].nodeValue ;
            }
          }
        });
      }
    </script>
  </head>
  <body>
    <form action="http://www.cnblogs.com/rubylouvre/" method="get">
      <button value="correct_submit" name="nasami" type="submit">
        error_submit
      </button>
    </form>
  </body>
</html>

posted on 2009-12-06 15:48 司徒正美阅读(3343) 评论(13) 编辑收藏举报

刷新页面返回顶部

Ruby's Louvre

导航

公告

IE的button元素bug