在IE6,IE7中,如果动态生成input元素,是无法为其设置name属性的。当然这bug已经在IE8中被修复,详见这里。由于name属性对表单元素非常重要(在提交表单时,与value属性组成键值对,发送到后台),因此必须留意这个bug。
原本bug代码:
解决办法有两个,方式一:用innerHTML,(innerHTML火狐与W3C等都兼容)
方式二:
另一个利用IE强大的createElement特征,它能在创建元素的同时,连属性也一起创建。
注意:
setAttribute在设置属性时,有许多属性在IE下与标准浏览器的命名是不一样的,看一下jQuery,发现它也是不全的。许多地雷埋在这里,下面是一个详尽的参照表:上边为标准游览器的,下边是IE的。
另外,IE不能用setAttribute为dom元素设置onXXX属性,换言之,不能用setAttribute设置事件。
IE要直接赋给一个函数!
原本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)");
}