日期:2014-05-16  浏览次数:20359 次

js 为input 添加 name属性,主要是针对IE
IE5、6、7均存在一个问题,便是用javascript使用document.createElement创建对象后,便无法动态赋予其name值。而对于FORM表单里的input元素里的name属性非常重要,如果name值赋予不成功,提交表单后肯定会出问题的。
一般我们的思想肯定是这样写:
t = document.createElement('input');
input.id = 'myId';
input.name = 'myName';
input.TYPE='text';(在IE下定义type改成大写)

这种写法在FireFox等非IE浏览器以及IE8中是正确的,但IE5、6、7不正确(微软总是在不经意间给予人以打击)。按照官方说法是,必须在createElement时赋予其name,即这样写:

JavaScript 代码复制内容到剪贴板
var input = document.createElement('<INPUT name="myName"/>');
input.id = 'myId';
可是这样写了之后,IE5、6、7是成功了。FireFox等非IE浏览器便不认了,创建元素失败。于是要将它们妥协。

在http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/用一个函数(判断是否为IE)解决此问题,它是把createElement重写了一遍:

function createElement(type, name) {    
var element = null;    
try {       
    element = document.createElement('<'+type+' name="'+name+'">');    
} catch (e) {}    
if (element==null) {    
element = document.createElement(type);    
element.name = name;    
}    
return element;    
}   
于是我写了一个例子页面测试一下,果然OK啰:

<html>
<head>
</head>
<body>
<div id='oyksoft'></div>
<input type="button" value="DOIT" onclick="docreate()"/>
<script type='text/javascript'>
function CreateInput(container){
container.innerHTML="";
var myinput=createElement("input","oyksoft_input");
myinput.id="oyksoft_id";
myinput.value="创建成功啦!";
container.appendChild(myinput);
alert(myinput.name);
}
function docreate(){
var container=document.getElementById("oyksoft");
CreateInput(container);
}
function createElement(type, name) {
var element = null;
try {
// First try the IE way; if this fails then use the standard way
element = document.createElement('<'+type+' name="'+name+'">');
} catch (e) {
// Probably failed because we’re not running on IE
}
if (element==null) {
element = document.createElement(type);
element.name = name;
}
return element;
}
</script>
</body>
</html>
</body></html>