IE的button元素bug

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" 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>
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
相关阅读:
关于用户体验的几张图片
 上下翻滚JS特效代码
 关注程序员健康之——缺失营养时的六种信号
 C#基础知识系列之——for循环
 关于程序中的需求的变化，责任的分配
 Silverlight学习之——Canvas对象
 还是觉得应该动手写点东西....
怎样理解“道不同，不相为谋”这句话呢。。。
UML图中最基本的是类图
 .NET中各种数据库连接大全
原文地址：https://www.cnblogs.com/rubylouvre/p/1617976.html