在IE6,IE7中,如果动态生成input元素,是无法为其设置name属性的。当然这bug已经在IE8中被修复,详见这里。由于name属性对表单元素非常重要(在提交表单时,与value属性组成键值对,发送到后台),因此必须留意这个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");//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)");
}
分享到:
相关推荐
然而,当你尝试为创建的`<input>`元素设置`name`属性时,可能会遇到一些兼容性问题,特别是在旧版本的Internet Explorer(如IE6和IE7)中。在这些浏览器中,直接通过`obj.name = "select"`的方式设置`name`属性可能...
这意味着如果你尝试用JavaScript动态生成一个`INPUT`元素并试图为其设置`NAME`属性,例如`document.createElement('input')`,然后通过`.setAttribute('name', 'username')`来设定`NAME`属性,这种做法在IE6中将不会...
在网页开发中,动态生成页面元素是一种常见的需求,尤其是在交互性较强的Web应用中。这允许开发者根据用户的操作或特定条件在页面上创建新的元素,例如添加输入框、下拉选项等。以下我们将深入探讨如何使用...
这意味着对于像`div`、`span`这样的元素,`getElementsByName()`在IE中可能无法正常工作,因为它们不支持`name`属性。 当遇到这种情况时,开发者需要寻找替代方案来获取这些无`name`属性元素。在给定的示例中,我们...
通过`document.createElement`方法创建一个新的`div`元素,并设置其样式属性,包括高度、宽度、背景颜色、不透明度等。最后,将其添加到页面的`body`元素中。 ##### 步骤二:创建子窗体 ```javascript // 创建子...
本文介绍了在JavaScript中获取具有相同name属性的多个input输入框值的方法,并分析了密码输入框的加密处理。同时,强调了在开发中应当注意的兼容性问题和标准的DOM操作方法,以便于写出更健壮、更兼容的代码。此外,...
在这个例子中,我们创建了一个`<input>`元素,并将其`type`属性设置为`color`,生成了一个颜色选择器。当用户选择一个颜色并关闭颜色选取器后,`onchange`事件会被触发,将所选颜色应用于页面背景。 `<input>`元素...
2. **选择器的使用**:学习如何编写XPath和Css表达式来定位页面上的特定元素,例如,通过id、class、tag name、属性等进行定位。 3. **定位策略**:掌握XPath和Css的不同定位策略,如绝对路径与相对路径,类选择器、...
在IE中,`getElementsByName`不仅会匹配name属性,还会匹配ID属性,这意味着如果你用一个ID作为参数调用`getElementsByName`,它仍然能找到相应的元素。 例如,下面的代码片段在IE中会正常工作,因为它可以通过name...
然而,需要注意的是,`document.all`在标准浏览器中可能不受支持,因此在实际项目中,更推荐使用`document.getElementById`、`document.getElementsByName`等标准方法来访问DOM元素,以确保代码的兼容性和可维护性。
在JavaScript中,创建一个input数组并绑定click事件是常见的需求,尤其在动态生成或操作DOM元素时。这个过程包括获取页面上的input元素,将它们组织成数组,然后为每个元素添加点击事件监听器。以下是对这个主题的...
1.调用createUploadForm,此方法中增加了change参数,此参数用户给新生成的input-file元素绑定change事件,如果不需要可以不加此参数。 2.要上传的input-file元素,建议放id和name属性,而且这两个属性值要保持一致 ...
`<output>`元素用于显示计算结果,常用于脚本中动态生成的数据。例如: ```html ()"> <input type="number" name="a" value="10"> <input type="number" name="b" value="20"> <input type="submit" value=...
`live()`方法(在jQuery 1.4.2及以后版本中被`delegate()`取代)用于为动态生成的元素绑定事件处理程序。当页面中动态添加了带有类名`someClass`的按钮时,可以立即响应`click`事件。 以上就是从提供的jQuery实例...
TagName默认为INPUT TagName= ;网页节点 属性标识 默认为NAME属性 AttName= ;网页节点 属性值 AttVal= ;值 支持自动转码如\r\n自动转换成换行回车符 Value=etsoftware.3322.org ;执行前停留时间单位为毫秒 ...
描述中指出,查看编译后的源代码会发现`<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE">`这样的标签,以及标签,这些都是ASP.NET自动生成的用于维护页面状态的元素。对比其他非ASP.NET站点,如博客园,...
在实际应用中,你可能还需要处理文件上传事件,例如使用`<input type="file">`元素。当用户选择文件后,触发`change`事件,调用`importExcel`函数并传入选中的文件对象。 注意,这种方法仅适用于IE浏览器,对于其他...
在QTP测试中,正则表达式可以用于多种场合,例如测试对象的某个属性是动态变化的时候,相似对象的识别通过Index属性来匹配,验证点属性动态生成,以及处理较长字符串时简化输入等。利用正则表达式,可以将对象属性...
- **构造函数 `Picture`**:定义了一个 `Picture` 类,其中包含了获取图片路径、设置 `<img>` 元素属性以及格式验证等功能。 #### 注意事项 1. **浏览器兼容性**:对于不同的浏览器,获取文件路径的方式有所不同,...