IE的button元素bug

　来源：Ruby's Louvre　发布时间：2009-12-08 12:39:00　

标签：button,bug,ie

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" content="IE=7"> <title>button element bug by 司徒正美 aspxhome.com</title> <script src="http://common.cnblogs.com/script/jquery.js" type="text/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"> <title>button element bug by 司徒正美 aspxhome.com</title> <script type="text/javascript" charset="utf-8"> window.onload = function(){ var el = document.getElementById("bb"); alert(el.attributes["value"].nodeValue) } </script> </head> <body><button value="正确的值" id="bb"> <span style="color:red;">错误的值</span></button> </body></html>

如果是提交表单时，就有点麻烦了。为了对比效果，我把错误的提交也做成例子了。留意以下运行框，点击按钮后如果地址栏的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 司徒正美 aspxhome.com</title> <script type="text/javascript" charset="utf-8"> </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>

加上修正脚本之后……

<!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 司徒正美 aspxhome.com</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>

投稿

IE的button元素bug

猜你喜欢