在IE6,IE7中,如果動態(tài)生成input元素,是無法為其設(shè)置name屬性的。當然這bug已經(jīng)在IE8中被修復。由于name屬性對表單元素非常重要(在提交表單時,與value屬性組成鍵值對,發(fā)送到后臺),因此必須留意這個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");
root.appendChild(form);
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特征,它能在創(chuàng)建元素的同時,連屬性也一起創(chuàng)建。
<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);
form.appendChild(input);
alert(form.elements.test)
}
</script>
注意:setAttribute在設(shè)置屬性時,有許多屬性在IE下與標準瀏覽器的命名是不一樣的,看一下jQuery,發(fā)現(xiàn)它也是不全的。許多地雷埋在這里,下面是一個詳盡的參照表:代碼
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"
}
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請
點擊舉報。