`
maomaozgc
  • 浏览: 329321 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ie中不能动态生成input元素中的name等相关属性

阅读更多
在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)"); 
}
分享到:
评论

相关推荐

    IE6不能修改NAME问题的解决方法

    昨天在项目中发现IE6动态生成的INPUT是不能改NAME的,微软关于这个问题有这么个说法

    javascript createElement()创建input不能设置name属性的解决方法

    这句话并不能起到预期的作用,无论是看生成后的HTML代码还是观察使用document.getElementsByName()获取的数组长度,都会发现这个name设置并没有起作用。当然这种情况只出现在IE6和IE7中,而在FireFox中是没有问题的...

    ajaxfileupload.js

    1.调用createUploadForm,此方法中增加了change参数,此参数用户给新生成的input-file元素绑定change事件,如果不需要可以不加此参数。 2.要上传的input-file元素,建议放id和name属性,而且这两个属性值要保持一致 ...

    IE助手(自动填表)

    TagName默认为INPUT TagName= ;网页节点 属性标识 默认为NAME属性 AttName= ;网页节点 属性值 AttVal= ;值 支持自动转码如\r\n自动转换成换行回车符 Value=etsoftware.3322.org ;执行前停留时间单位为毫秒 ...

    大名鼎鼎SWFUpload- Flash+JS 上传

     动态修改SWFUpload初始化设置中的post_params属性,其中所有的值都将被覆盖。  - 参数  param_object:一个simple JavaScript object,所有的name/value都必须是字符串,例如(this.setPostParams({ "Mari": name...

    ExtAspNet_v2.3.2_dll

    -修正了在Grid的PageIndexChange事件中不能获取SelectedRowIndexArray属性的BUG(feedback:Violet)。 -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle=...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    --也就是说生成的input的type不能是"submit",而这个限制在有些情况下是不可原谅的。 --我们做了优化,现在要使一个Asp.net的按钮能够AJAX提交,你不需要做任何设置(PageManager的属性EnableAjax为true即可,这...

    PreviewImage:上载预览到IE7(部分)

    基本用法 $("input[name=preview]").uploadpreview({div: ".preview",imgwidth: 180,imgheight: 120});1.输入元素没有名称属性会抛出错误* 1.1。 名称属性需要以[]结尾,以便php可以将其理解为数组2.如果未声明div...

    file-input-ie11:Angular项目,带有输入以加载图像并在Internet Explorer 11中查看它们

    文件输入图像IE11 该项目是使用版本11.2.1生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件,该应用程序将自动重新加载。 代码脚手架 运行ng generate ...

    在b/s开发中经常用到的javaScript技术整理

    2.2 动态添加,修改,删除下拉框中的元素 2.3 可以输入内容的下拉框 2.4 多行文本框中只能输入iMax文字。如果多输入了,自动减少到iMax个文字(多用 于短信发送) 3、打印类 3.1 打印控件 4、事件类 ...

    PHP基础教程 是一个比较有价值的PHP新手教程!

    本教程并不想让你完全了解这种语言,只是能使你尽快加入开发动态web站点的行列。我假定你有一些HTML(或者HTML编辑器)的基本知识和一些编程思想。 1.简介 PHP是能让你生成动态网页的工具之一。PHP网页文件被当作...

    基于hhww改进版的传统五笔输入法

    2、在Vista中IE7(UAC)下不能使用问题,用以下命令设置一下码表级别: icacls.exe "%windir%\system32\我的输入法.mb" /SetIntegrityLevel Level src="./images/smilies/sweat.gif" border=0 smilieid="10"&gt; 3、...

    完全免费的Java/jsp开发编辑工具FirstJava2

    2.当是输入某一个"变量名."时就会显示编辑辅助对话框中,来显示变量类型的所有相关公共的函数和属性 列表框中双击某一个函数名,代码编辑区将会自动输入"函数名()",如果这个函数有参数光标定位于 括号中,否则定位到...

    基于hhww改进版的传统五笔输入法(新版支持WIN7)

    2、在Vista中IE7(UAC)下不能使用问题,用以下命令设置一下码表级别: icacls.exe "%windir%\system32\我的输入法.mb" /SetIntegrityLevel Level src="./images/smilies/sweat.gif" border=0 smilieid="10"&gt; 3、...

    FirstJava2完全教材

    2.当是输入某一个"变量名."时就会显示编辑辅助对话框中,来显示变量类型的所有相关公共的函数和属性 列表框中双击某一个函数名,代码编辑区将会自动输入"函数名()",如果这个函数有参数光标定位于 括号中,否则定位到...

    JS分页效果JS分页效果

    function showPages(name) { //初始化属性 this.name = name; //对象名称 this.page = 1; //当前页数 this.pageCount = 1; //总页数 this.argName = 'page'; //参数名 this.showTimes = 1; //打印次数 } ...

    KODExplorer 芒果云-资源管理器

    - 桌面任务栏点不中bug - 部分文案问题 - 众多细节优化 ###ver2.1 `2014/4/2` ---- ####update: - 文件夹拖拽上传,完美解决(保持原始目录结构) - 解压缩优化;解压中文问题。解压缩整体速度 - 树目录增加...

    .NET万能框架:Masuit.Tools

    字符串扩展:包含验证码生成、各种与字符串相关的扩展; Win32API:包含于Windows系统接口相关的操作封装; 全局扩展:包含字符串扩展,类型转换,委托、循环操作、异步操作、正则等。 用法 1.检验字符串是否是...

    php上传进度条APC

    &lt;input type="hidden" name="APC_UPLOAD_PROGRESS" value="(mt_srand())?&gt;"&gt; 为什么钩子的值是用php的uniqid()函数取得呢?因为很多人同时上传文件的话,不同文件的钩子不能相同啊。系统会把 APC_UPLOAD_PROGRESS域...

Global site tag (gtag.js) - Google Analytics