IE的button元素bug
2009-12-06 15:48
204 查看
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值，我们可以简单地使用如下代码：
<!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>
运行代码
<!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>
运行代码
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- button在ie中两边空格的bug
- jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
- Facebook Like Button在IE上的bug
- IE8下元素背景为透明时，hover事件失效的bug
- 发现IE6、IE7下列表li中内联块级元素的错位bug
- IE6、IE7中获取Button元素的值的bug说明
- IE中浮动元素折行bug
- ie里的button标签的一个bug
- IE7下父元素及子元素的隐藏顺序不当带来的display:none出现BUG
- IE10的bug？disabled button如何触发事件
- IE 浏览器下 button元素自动触发click？
- IE6/7中获取Button元素的值的bug
- 【IE bug 解决办法】IE下（IE10及以下）当元素为absolute定位时，点击事件失效的解决办法 分类： ie ie bug ie absolute click 2015-06-26 11:05 21人阅读 评论(0) 收藏
- jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
- 修复IE 8 表单中的 button 元素点击时背景图像的CSS 问题
- li中浮动元素span等在IE和Firefox中的高度Bug
- 【IE bug 解决办法】IE下（IE10及以下）当元素为absolute定位时，点击事件失效的解决办法
- IE6下li中span元素右浮动的BUG解决方案(其他的类似)
- ie下的bug之button
- IE中getElementsByTagName无法获取元素BUG