Ie中不能动态生成input元素中的name等相干属性

Ie中不能动态生成input元素中的name等相关属性
在IE6,IE7中，如果动态生成input元素，是无法为其设置name属性的。当然这bug已经在IE8中被修复，详见这里。由于name属性对表单元素非常重要（在提交表单时，与value属性组成键值对，发送到后台），因此必须留意这个bug。
原本bug代码：

<script type="text/javascript">
window.onload = function(){
var form = document.createElement("form");
var input = document.createElement("input");
var root = document.body;
input.setAttribute("name", "test");//ie6,7,8创建name属性不稳定。6,7不可以8可以
root.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏
form.appendChild(input);
alert(form.elements.test)
}
</script>

解决办法有两个，方式一：用innerHTML，（innerHTML火狐与W3C等都兼容）

<script type="text/javascript">
window.onload = function(){
var body = document.body;
var form = document.createElement("form");
form.innerHTML = "<input name='test' type='text' />"
body.appendChild(form);
alert(form.elements.test)
}
</script>

方式二：
另一个利用IE强大的createElement特征，它能在创建元素的同时，连属性也一起创建。

<script type="text/javascript">
window.onload = function(){
var body = document.body;
var form = document.createElement("form");
try{
var input = document.createElement("<input type='text' name='test'>");
}catch(e){
var input = document.createElement("input");
input.setAttribute("name", "test")
}
body.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏
form.appendChild(input);
alert(form.elements.test)
}
</script>

注意：
setAttribute在设置属性时，有许多属性在IE下与标准浏览器的命名是不一样的，看一下jQuery，发现它也是不全的。许多地雷埋在这里，下面是一个详尽的参照表：上边为标准游览器的，下边是IE的。

var IEfix = { 
acceptcharset: "acceptCharset", 
accesskey: "accessKey", 
allowtransparency: "allowTransparency", 
bgcolor: "bgColor", 
cellpadding: "cellPadding", 
cellspacing: "cellSpacing", 
"class": "className", 
colspan: "colSpan", 
defaultchecked: "defaultChecked", 
defaultselected: "defaultSelected", 
defaultvalue: "defaultValue", 
"for": "htmlFor" , 
frameborder: "frameBorder", 
hspace: "hSpace", 
longdesc: "longDesc", 
maxlength: "maxLength", 
marginwidth: "marginWidth", 
marginheight: "marginHeight", 
noresize: "noResize", 
noshade: "noShade", 
readonly: "readOnly", 
rowspan: "rowSpan", 
tabindex: "tabIndex", 
valign: "vAlign", 
vspace: "vSpace" 
}

　　另外，IE不能用setAttribute为dom元素设置onXXX属性，换言之，不能用setAttribute设置事件。

IE要直接赋给一个函数！

var body = document.body; 
var form = document.createElement("form"); 
form.innerHTML = "<input name='test' type='text' />" 
body.appendChild(form); 
if(!+"\v1"){ 
form.elements.test.setAttribute("onfocus", function(){alert(this.name)}); 
}else{ 
form.elements.test.setAttribute("onfocus", "alert(this.name)"); 
}

Ie中不能动态生成input元素中的name等相干属性

相关推荐