在刚完成的项目中遇到用javascript动态创建的单选按钮在IE中无法选中的情况,在排除脚本逻辑错误后百思不得其解的情况下搜索到原来这是个IE下的BUG:
The NAME attribute cannot be set at run time on elements dynamically created with the createElement method. To create an element with a name attribute, include the attribute and value when using the createElement method.
中文的文章可以看这里http://www.javaeye.com/topic/26917。
其中两个参考文献链接:
http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/,
http://www.thunderguy.com/semicolon/2005/05/23/setting-the-name-attribute-in-internet-explorer/
这个BUG使得无法使用document.createElement(“input”); 创建我们想要的input标签,但可以这样:
document.createElement('<input type="radio" name="username" >');
当然这不是W3C支持的做法,所以在FF中无效,全面一点的函数是:
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) {
element = document.createElement(type);
element.name = name;
}
return element;
}
然后对属性的设置需要使用:
element.setAttribute("type", "radio");
如果你使用了jQuery,可以直接使用jQuery(html)来创建它:
elm=$('<input type="radio" name="username" />');
不过,jQuery这个方法也得先把type写进去,否则会抛出uncaught exception: type property can’t be changed异常。
——————————–
2009年鬼节补充更新:
看到叶虫同学说这不叫BUG,于是我又上去查一下,就看到这了个http://msdn.microsoft.com/en-us/library/ms534184(VS.85).aspx,其中有这样的备注:
Internet Explorer 8 and later. In IE8 mode, dynamically setting the name attribute on an input type=radio button correctly applies that button to the same named group. For more information on IE8 mode, see Defining Document Compatibility.
大致意思是:IE8及以后的版本中,type=radio的单选按钮已经可以正常设置了。然后下面又有一段:
Internet Explorer 8 and later can set the NAME attribute at run time on elements dynamically created with the createElement method. To create an element with a NAME attribute in earlier versions of Internet Explorer, include the attribute and its value when using the createElement method.
大致意思是说,IE8及以后的版本中,即使使用createElement在运行时创建的元素,也可以设置它的NAME属性了;而至于较早版本的IE,就需要在createElement创建时就指定一个name属性了。
不过下面这行我又不知道是什么意思了,因为看不明白所指的programming model 是什么,请看:
Microsoft JScript allows the name to be changed at run time. This does not cause the name in the programming model to change in the collection of elements, but it does change the name used for submitting elements.
我不懂DOM的内在机理,于是上去查了一下Document Object Model Core(DOM核心),从Interface Node章节,Interface NodeList章节以及Interface NamedNodeMap章节粗略了解到,DOM在机器内部运算时还定义了一些接口,如NodeList接口,NamedNodeMap接口等。
这些都是一些内在的机理了,估计在开发浏览器或者一些很高级的应用才要关注到。而我们这里所说的name属性,其实就是指Interface Node接口中当nodeType为ATTRIBUTE_NODE时的一个实例了,而不是其它。简单点说,就是此NAME非彼NAME,一个分子级别,一个是原子级别。
Microsoft JScript对DOM的运行机理可能不一样,但上面那行英文应该也是这个意思。或者就是想告诉我们,改变这个name可以用来提交表单什么的,但想改变IE内部的运行机理,这就不行了。
关于Javascript与Microsoft JScript:
从这里《The Difference Between JavaScript and JScript》以及其评论,可以看出Javascript与Microsoft JScript的分别:
Javascript :最早是Netscape开发的一套脚本语言,现在谈起它,就是指W3C标准里的那个ECMA Script;
Microsoft JScript:Microsoft 在其浏览器IE里对Javascript的实现,虽然它并没有完全地实现Javascript的特性,但也增加了一些Javascript所没有的。
所以从我们老生常谈的WEB标准角度,我们当然希望无论是Microsoft JScript还是其它浏览器所实现的JScript都跟标准的ECMA Script是一个样了,这样无论对开发者还是用户都是件好事
。