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

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

Javascript: 让您的菜单不离网站; JavaScript去除空格的几种方法; TFDN图片播放器不错自动播放; 通过ifame指向的页面高度调整iframe的高度; 解放web程序员的输入验证; 让背景如此暗淡（一种弹出提示信息时页面背景色调改变的方法）; 关于textarea的直观换行的一些研究材料; 网页缓存文件批量改名工具; 按钮里的字可以换行吗; 许愿墙中用到的函数; 自动更新作用; 激活 ActiveX 控件; 使用Javascript和DOM Interfaces来处理HTML; 获取DOM对象的几种扩展及简写; splice slice区别; Array.slice()与Array.splice()的返回值类型; $$()函数应用实例; window.open的功能全解析; 点击单元格后可编辑单元格内文本如何制作; 用JavaScript脚本实现Web页面信息交互

No. « ‹ 26 27 28 29 › »

技术文章搜索

关键字

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

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

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