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

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

Javascript: innerHTML和innerText的用法; 单击按钮复制定义好的内容到剪贴板; 浏览器兼容性:停止事件冒泡和阻止浏览器的默认行为; javascript初学者:全面学习对象概念; 10款图片展示Javascript代码; 解决ajax跨域问题的实例; rails制作rss feed; javascript变量作用域在不同浏览器的处理; 网页整理的JS技巧代码; js操作iframe的src的例子; Javascript利用循环绑定事件的例子; Javascript网页恶意代码; javascript恶意代码修改主页修复; JavaScript折叠式列表的网页制作; 初学Javascript的总结; JavaScript编程实践中容易出错的地方; JavaScript容易犯错的九个陷阱; 复制文章自动附加版权信息; MooTools教程(1):认识MooTools; MooTools教程(2):DOM选择器

No. « ‹ 165 166 167 168 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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