IE的button元素bug

最新推荐文章于 2025-09-10 09:07:54 发布

转载最新推荐文章于 2025-09-10 09:07:54 发布 · 99 阅读

文章标签：

本文详细解析了IE浏览器中button元素存在的一个严重Bug，该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" content="IE=7"> <title>button element bug by 司徒正美</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 司徒正美</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 司徒正美</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 司徒正美</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>

运行代码