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

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

Javascript: 推荐js实现商品分类到搜索栏友好提示（人机交互）; attachEvent的使用方法与传递参数[IE|firefox]; 用javascript实现鼠标框选; 一个不错的动感导航菜单; JavaScript网页制作特殊效果用随机数; 一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera; js实现的的文字自动''到google search框; JS值当前DIV的ID值的代码; 在javascript中，如果删除二维数组中重复的元素; 一个用js实现的页内搜索代码; 不用MOUSEMOVE也能滑动啊; asp 的分词实现代码; 更正确的asp冒泡排序; 用Javscript实现表单复选框的全选功能; 向fckeditor编辑器插入指定代码的方法; javascript实现在光标处插入指定内容; 如何实现动态删除javascript函数; javascript父子通信; JS获取scrollHeight问题想到的标准问题; 從博客網扣了一個效果出來

No. « ‹ 68 69 70 71 › »

技术文章搜索

关键字

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

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

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