`
q530414675
  • 浏览: 3928 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

javascript创建input时添加name属性

阅读更多
IE5、6、7均存在一个问题,便是用javascript使用document.createElement创建对象后,便无法动态赋予其name值。而对于FORM表单里的input元素里的name属性非常重要,如果name值赋予不成功,提交表单后肯定会出问题的。

一般我们的思想肯定是这样写:

JavaScript 代码复制内容到剪贴板
var input = document.createElement('input');
input.id = 'myId';
input.name = 'myName';
这种写法在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重写了一遍:

JavaScript 代码复制内容到剪贴板
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;    
}   


<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) {
element = document.createElement(type);
element.name = name;
}
return element;
}
</script>
</body>
</html>
</body></html>


分享到:
评论

相关推荐

    JavaScript获取并更改input标签name属性的方法

    本文实例讲述了JavaScript获取并更改input标签name属性的方法。分享给大家供大家参考。具体实现方法如下: &lt;input name="kk"&gt;&lt;/input&gt; [removed] // 这里用getElementsByTagName把所有的input对象取...

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

    今天在使用document.createElement()动态创建input时,发现不能为其name赋值,以下是测试代码。

    将name值一样的input值拼接起来

    form表单中的文本框的name值一样时,要取到所有的文本框中的值并传到后台时写的一种javascript中的拼接字符串的方法,希望可以帮到你们!

    javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到过类似的效果! 1、先用document.createElement方法创建一个input元素! var newInput = document.createElement(...

    用javascript添加控件自定义属性解析

    前面说过为HTML元素添加自定义的属性,是通过手动在HTML控件中加上,其实可以在javascript中动态添加:如有一文本框: 代码如下:&lt;input type=”text” id=”txtInput” name=”txtInput” value=”自定义文本”&...

    JavaScript编写的简单计算器

    input name="ipt" type="text" id="ipts" value="0" size="40" maxlength="20" readonly="readonly" /&gt; &lt;input name="button23" type="button" class="bt" id="button23" value="Backspace" /&gt; &lt;...

    javascript文档

    input 属性 返回进行查找的字符串。 instanceof 运算符 返回一个 Boolean 值,表明某个对象是否为特定类的一个实例。 isFinite 方法 返回一个 Boolean 值,表明某个给定的数是否是有穷的。 isNaN 方法 返回一个 ...

    javascript的日期加减

    &lt;input name=haha type=button value="本周第一天" onclick=alert(getWeekFirstDay(0))&gt; &lt;input name=haha type=button value="本周第七天" onclick=alert(getWeekLastDay(0))&gt; &lt;input name=...

    jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name、id、class获取input输入框中的value 先准备一段 HTML &lt;input type="text" id="CN_NAME" name="CN_NAME" class="CN_NAME"&gt; 一、jquery获取input文本框...

    attr-accept:HTML5输入元素的“ a​​ccept”属性JavaScript实现

    接受HTML5的“ accept”属性JavaScript实现&lt;input type="file"&gt; 有关更多信息,请参见 。安装npm install --save attr-accept用法var accept = require ( 'attr-accept' ) ;accept ( { name : 'my file.png' ,...

    Javascript获取表单名称(name)的方法

    本文实例讲述了Javascript获取表单名称(name)的方法。分享给大家供大家参考。具体如下: 下面的代码通过表单的name属性获得表单名称 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;form id=frm1 name=form1&...

    javascript的IE和Firefox兼容性汇编

    javascript的IE和Firefox兼容性汇编 1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document....又如:document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]

    javascript 登陆

    密 码:&lt;input type="text" name="password"&gt; &lt;input type="submit" name="submit" value="登陆" onClick="show()"/&gt; &lt;input type="reset" name="reset" value"重置"/&gt; &lt;/form&gt;

    HTML5 Placeholder实现input背景文字提示效果

    但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性,然后在属性值里输入你需要的提示信息。 语法基本是这个样子:&lt;input...

    javascript 控制input只允许输入的各种指定内容

    input name=username type=text onkeyup=value=this.value.replace(/\D+/g,'')&gt; 2、只允许输入英文字母、数字和下划线(以下二种方法实现) &lt;input name=username type=text style=ime-mode:disabled&gt; &lt;...

    JavaScript中获取Radio被选中的值

    input type=radio name=userid value=1&gt;1 &lt;input type=radio name=userid value=2&gt;2 &lt;input type=radio name=userid value=3&gt;3 &lt;/form&gt; [removed] function usubmit(action){ v

    JavaScript获得表单target属性的方法

    本文实例讲述了JavaScript获得表单target属性的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;form id=frm1 action=form_action.asp target=_blank&gt; First...

    js创建一个input数组并绑定click事件的方法

    代码如下: &lt;/pre&gt;&lt;pre name=”code” class=”javascript”&gt;&lt;html&gt; &lt;body&gt; &lt;input type=”button” name=”input[]” value=”按钮1″ /&gt; &lt;input type=”button” name=”input[]” value=...

Global site tag (gtag.js) - Google Analytics