IE在DOM操作有表单控件时的bug_表单特效

2019年7月30日 09:51:45js教程评论1.4K views阅读模式

bug描述

当象下例中那样操作了表单radio/checkbox的DOM结构时（或者直接影响了他们的结构时）选中的checkbox/radio将会自动恢复到默认状态，有如点了reset按钮一样。

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

解决方法

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

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

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]