IE的button元素bug

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

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>

标签：button,bug,ie

投稿

IE的button元素bug

猜你喜欢

用asp获取微软安全更新列表的代码小偷程序

python文件处理笔记之文本文件

详解Python的多任务进程

Golang学习笔记之延迟函数(defer)的使用小结

Go语言数据结构之选择排序示例详解

使用python实现飞机大战游戏

python中remove函数的踩坑记录

如何利用pyinstaller打包Python程序为exe可执行文件

SQLServer 使用ADSI执行分布式查询ActiveDorectory对象

SQL Server连接中经常出现的3个常见错误与解答

Python图像增强imgaug详解

记一次MySQL更新语句update的踩坑

JS 类型转换常见方法小结

简单易懂Pytorch实战实例VGG深度网络

django中只使用ModleForm的表单验证

Python自动扫雷实现方法

Golang中HttpRouter路由的使用详解

asp如何实现点击数的计算？

Python 动态变量名定义与调用方法

Python爬虫小练习之爬取并分析腾讯视频m3u8格式

IE的button元素bug

猜你喜欢

用asp获取微软安全更新列表的代码 小偷程序

python文件处理笔记之文本文件

详解Python的多任务进程

Golang学习笔记之延迟函数(defer)的使用小结

Go语言数据结构之选择排序示例详解

使用python实现飞机大战游戏

python中remove函数的踩坑记录

如何利用pyinstaller打包Python程序为exe可执行文件

SQLServer 使用ADSI执行分布式查询ActiveDorectory对象

SQL Server连接中经常出现的3个常见错误与解答

Python图像增强imgaug详解

记一次MySQL更新语句update的踩坑

JS 类型转换常见方法小结

简单易懂Pytorch实战实例VGG深度网络

django中只使用ModleForm的表单验证

Python自动扫雷实现方法

Golang中HttpRouter路由的使用详解

asp如何实现点击数的计算？

Python 动态变量名定义与调用方法

Python爬虫小练习之爬取并分析腾讯视频m3u8格式

用asp获取微软安全更新列表的代码小偷程序