IE的button元素bug

zoukankan html css js c++ java

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>
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
查看全文

相关阅读:
教了公司新来的小姐姐这七种排序算法以及实现，她一脸崇拜的看着我
 历时两年零三个月，从刚毕业的外包到现在的阿里P7offer，我只做了这几件事
 深度分享：面试阿里，字节跳动，美团90%会被问到的HashMap知识
 备份一下我的.bash_aliases文件
 Error（10028）：Can't resolve multiple constant drivers for net “ ” at **.v
Error (10170): Verilog HDL syntax error at passwd.v(21) near text "if"; expecting an identifier ("if" is a reserved keyword ), or "endmodule", or a parallel statement
正在从 Windows 应用商店下载... 无法从 Windows 应用商店下载。请检查网络连接。
完全卸载win10上的Ubuntu子系统
 >>> print "hello" SyntaxError: Missing parentheses in call to 'print'
深入Linux内核架构

原文地址：https://www.cnblogs.com/rubylouvre/p/1617976.html