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

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

Javascript: 阻止JavaScript事件冒泡传递（cancelBubble 、stopPropagation）; (转载)JavaScript中匿名函数，函数直接量和闭包; 简单的无缝滚动程序-仅几行代码; Javascript中的数学函数集合; javascript之大字符串的连接的StringBuffer 类; javascript之对系统的toFixed()方法的修正; 用javascript实现自定义标签; js在客户端验证密码强度，兼容FireFox和IE; javascript背景颜色按时变换; 脚本分析、压缩、混淆工具 JSA新版本发布，压缩效率提高大约10％; javascript语句中的CDATA标签的意义; 用javascript实现分割提取页面所需内容; 网上抓的一个特效; js之点击超连接,提示一个层.点击空白.层消失; 模拟用户操作Input元素，不会触发相应事件; 弹出广告特效代码(一个IP只弹出一次); (仅IE下有效)关于checkbox 三态; JavaScript Archive Network 集合; 关于__defineGetter__ 和__defineSetter__的说明; textContent在Firefox下与innerText等效的属性

No. « ‹ 66 67 68 69 › »

技术文章搜索

关键字

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

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

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