js 为input 添加 name属性,主要是针对IE -

judim

浏览: 41785 次
性别:
来自: 广州

最近访客更多访客>>

hys141001

xush_319

caichengo

温暖如初ling

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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>

分享到：