IE在DOM操作有表单控件时的bug- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > IE在DOM操作有表单控件时的bug

Javascript: 有趣的script标签用getAttribute方法来自脚本吧; 学习YUI.Ext 第二天; 学习YUI.Ext 第三天; 学习YUI.Ext第五日--做拖放Darg&Drop; 学习YUI.Ext 第六天--关于树TreePanel(Part 1); 学习YUI.Ext 第七天--关于View&JSONView; 学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点); 对YUI扩展的Gird组件 Part-2; Gird事件机制初级读本; 为Yahoo! UI Extensions Grid增加内置的可编辑器; 如何简单地用YUI做JavaScript动画; (function(){})()的用法与优点; JS层移支示例代码; 如何在Web页面上直接打开、编辑、创建Office文档; 网页中实现浏览器的最大，最小化和关闭按钮; [原创]js与自动伸缩图片自动缩小图片的多浏览器兼容的方法总结; 图片自动缩小的js代码,用以防止图片撑破页面; 收藏一些不常用，但是有用的代码; 解决 firefox 不支持 document.all的方法; 用ajax实现的自动投票的代码

No. « ‹ 55 56 57 58 › »

技术文章搜索

关键字

Javascript 中的 IE在DOM操作有表单控件时的bug

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 444 ::

收藏到网摘: n/a

javascript radio list的实现细节(多浏览器兼容) trim原型函数看js正则表达式的性能

影响的范围: IE的所有版本在表单的radio/checkbox控件中，一旦他们的DOM结构被更改过就会出现这个bug。 bug描述
当象下例中那样操作了表单radio/checkbox的DOM结构时（或者直接影响了他们的结构时）选中的checkbox/radio将会自动恢复到默认状态，有如点了reset按钮一样。

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rank's HTML document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="ImageToolbar" content="no" />
<meta http-equiv="Creator.name" content="Rank, BlueDestiny, never-online" />
<style type="text/css" title="default" media="screen">
/*<![CDATA[*/
body { font-size:80%; line-height:1.5; }
body, button { font-family:arial; }
button { padding:0 0.3em 0 0.3em; }
h1, h3 { margin:0; padding:0; }
h1 { font-size:2.3em; }
h3 { font-size:1.3em; }
form { display:inline-block; }
div.link { padding:1em; }
div.content { background:#ffc; padding:1em; border:1px solid #222; margin:1em 0 1em; }
#rdoWrapper { }
#hd { text-align:center; }
/*]]>*/
</style>
</head>
<body>
<div id="hd">
<h1> IE form control bug </h1>
<div class="link">from: <a href="http://www.never-online.net/blog"><em>never-online weblog</em></a></div>
</div>
<div id="rdoWrapper" class="content">
<h3> 1. Select radio to checked </h3>
<form method="post">
<input type="radio" name="rdo" id="rdo-1" value="rdo-1" checked><label for="rdo-1">radio1</label>
<input type="radio" name="rdo" id="rdo-2" value="rdo-2"><label for="rdo-2">radio2</label>
<input type="radio" name="rdo" id="rdo-3" value="rdo-3"><label for="rdo-3">radio3</label>
<input type="radio" name="rdo" id="rdo-4" value="rdo-4"><label for="rdo-4">radio4</label>
</form>
</div>
<div class="content">
<h3> 2. Click button to change dom structure </h3>
<p class="p"><button type="button" onclick="handleChangeDom()">test</button>
</div>
<script type="text/javascript">//<![CDATA[
function getRadioValue(ctlName) {
var ctls = document.getElementsByName(ctlName);
var len = ctls.length;
for (var i=0; i<len; i++) {
if (ctls[i].checked) {
return ctls[i].value;
}
}
}
function handleChangeDom() {
alert('before append, you select radio value is "'+getRadioValue('rdo')+'"');
var wrapper = document.getElementById('rdoWrapper');
document.body.appendChild(wrapper);
alert('after append, you select radio value is "'+getRadioValue('rdo')+'"');
}
//]]></script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

解决方法
可以在操作DOM之前，用defaultChecked来设置checked的值。

点击运行可以看到效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rank's HTML document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="ImageToolbar" content="no" />
<meta http-equiv="Creator.name" content="Rank, BlueDestiny, never-online" />
<style type="text/css" title="default" media="screen">
/*<![CDATA[*/
body { font-size:80%; line-height:1.5; }
body, button { font-family:arial; }
button { padding:0 0.3em 0 0.3em; }
h1, h3 { margin:0; padding:0; }
h1 { font-size:2.3em; }
h3 { font-size:1.3em; }
form { display:inline-block; }
div.link { padding:1em; }
div.content { background:#ffc; padding:1em; border:1px solid #222; margin:1em 0 1em; }
#rdoWrapper { }
#hd { text-align:center; }
/*]]>*/
</style>
</head>
<body>
<div id="hd">
<h1> fixed IE form control bug </h1>
<div class="link">from: <a href="http://www.never-online.net/blog"><em>never-online weblog</em></a></div>
</div>
<div id="rdoWrapper" class="content">
<h3> 1. Select radio to checked </h3>
<form method="post">
<input type="radio" name="rdo" id="rdo-1" value="rdo-1" checked><label for="rdo-1">radio1</label>
<input type="radio" name="rdo" id="rdo-2" value="rdo-2"><label for="rdo-2">radio2</label>
<input type="radio" name="rdo" id="rdo-3" value="rdo-3"><label for="rdo-3">radio3</label>
<input type="radio" name="rdo" id="rdo-4" value="rdo-4"><label for="rdo-4">radio4</label>
</form>
</div>
<div class="content">
<h3> 2. Click button to change dom structure </h3>
<p class="p"><button type="button" onclick="handleChangeDom()">test</button>
</div>
<script type="text/javascript">//<![CDATA[
function getRadioValue(ctlName) {
var ctls = document.getElementsByName(ctlName);
var len = ctls.length;
for (var i=0; i<len; i++) {
if (ctls[i].checked) {
return ctls[i].value;
}
}
}
function setRadioDefaultValue(ctlName) {
var ctls = document.getElementsByName(ctlName);
var len = ctls.length;
for (var i=0; i<len; i++) {
ctls[i].defaultChecked = ctls[i].checked;
}
}
function handleChangeDom() {
alert('before append, you select radio value is "'+getRadioValue('rdo')+'"');
setRadioDefaultValue('rdo');
var wrapper = document.getElementById('rdoWrapper');
document.body.appendChild(wrapper);
alert('after append, you select radio value is "'+getRadioValue('rdo')+'"');
}
//]]></script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript radio list的实现细节(多浏览器兼容) trim原型函数看js正则表达式的性能

Javascript 中的 IE在DOM操作有表单控件时的bug

评论 (0) All