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

作者：Rank 来源：never-online weblog 时间：2008-08-21 13:00:00　

影响的范围: IE的所有版本

在表单的radio/checkbox控件中，一旦他们的DOM结构被更改过就会出现这个bug。

bug描述

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

bug重现

<!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></p> </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>

解决方法
可以在操作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></p> </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>

标签：bug,dom,表单,ie

投稿

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

猜你喜欢

滚动条样式的css代码介绍

javascript权威指南,学习笔记,之运算符号

科学与艺术兼顾的有效网页视觉设计

mysql使用LOAD语句批量录入数据方法

javascript让浏览器实现复读机的功能

ASP申请单动态添加实现方法及代码

[教程]用代码让你了解网页与键盘

建立合理的索引提高SQL Server的性能

sql 存储过程分页代码支持亿万庞大数据量

[翻译]寻找圣杯 In Search of the Holy Grail

提升JavaScript运行速度之循环篇[译]

Asp Object 之:AddHeader

css中absolute与relative的区别

如何做一个计数器并让人家申请使用？

SQL Server的怪辟：异常与孤立事务

PHP设计模式之模板方法模式Template Method Pattern详解

SQL Server取得网站路径的几种方法及比较

WEB2.0网页制作标准教程（10）自适应高度

用XsltArgumentList实现xsl的参数调用

仿dw8代码折叠功能的HTML编辑器

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

猜你喜欢

滚动条样式的css代码介绍

javascript权威指南,学习笔记,之运算符号

科学与艺术兼顾的有效网页视觉设计

mysql使用LOAD语句批量录入数据方法

javascript让浏览器实现复读机的功能

ASP申请单动态添加实现方法及代码

[教程]用代码让你了解网页与键盘

建立合理的索引提高SQL Server的性能

sql 存储过程分页代码 支持亿万庞大数据量

[翻译]寻找圣杯 In Search of the Holy Grail

提升JavaScript运行速度之循环篇[译]

Asp Object 之:AddHeader

css中absolute与relative的区别

如何做一个计数器并让人家申请使用？

SQL Server的怪辟：异常与孤立事务

PHP设计模式之模板方法模式Template Method Pattern详解

SQL Server取得网站路径的几种方法及比较

WEB2.0网页制作标准教程（10）自适应高度

用XsltArgumentList实现xsl的参数调用

仿dw8代码折叠功能的HTML编辑器

sql 存储过程分页代码支持亿万庞大数据量