动态添加input表单元素的js代码

标签: js框架 | 发表时间:2012-08-07 12:42 | 作者:admin
出处:http://blog.haohtml.com

addinput.js

//======================
//功能:在表单中input file控件
//参数:parentID---要插入input file控件的父元素ID
// inputID----input file控件的ID,这个一定要和name保持一致的,否则会出问题
// maxNum --- 最大数量 0为不限制
//======================
function createInput(parentID,inputFileID, maxNum){

if (maxNum > 0) {
x=document.getElementsByName(inputFileID);
y=x.length;
if (y >= maxNum) {
alert('最多只允许添加' + maxNum + '个');
return false;
}
}

var parent=$G(parentID);//获取父元素

var div=document.createElement("div");//创建一个div容器用于包含input file
var x=parseInt(Math.random()*(80-1))+1;
var divName=inputFileID+x.toString();//随机div容器的名称
div.name=divName;
div.id=divName;

var aElement=document.createElement("input"); //创建input
aElement.name=inputFileID;
aElement.id=inputFileID;
aElement.type="text";//设置类型为file
aElement.className = "dynInputLen";

var delBtn=document.createElement("input");//再创建一个用于删除input file的Button
delBtn.type="button";
delBtn.value=" ";
delBtn.className = "btn_del";
delBtn.onclick=function(){ removeInput(parentID,divName)};//为button设置onclick方法

div.appendChild(aElement);//将input file加入div容器
div.appendChild(delBtn);//将删除按钮加入div容器
parent.appendChild(div);//将div容器加入父元素
}
//============================
//功能:删除一个包含input file的div 容器
//参数:parentID---input file控件的父元素ID
// DelDivID----个包含input file的div 容器ID
//============================
function removeInput(parentID,DelDivID){
var parent=$G(parentID);
parent.removeChild($G(DelDivID));
}
//通过元素ID获取文档中的元素
function $G(v){return document.getElementById(v);}

在html里引入addinput.js文件.html代码如下:

<div id="div_zc" class="dynInput">
  <input name="zhuancheng[]" type="text" id="zhuancheng" value="" maxlength="50" />
  </div>
  <div style="clear:both;margin-top:10px; padding-left:5px;">
  <input type="button" onClick="createInput('div_zc','zhuancheng[]', 3)" name="button" id="button" value="+ 添加(限3条)" class="btn_add">

可以设定最多可以添加多少个input,如果设置为0的话,则表示不限制数量。

 

相关 [input 元素 js] 推荐:

动态添加input表单元素的js代码

- - haohtml's blog
//功能:在表单中input file控件. //参数:parentID---要插入input file控件的父元素ID. // inputID----input file控件的ID,这个一定要和name保持一致的,否则会出问题. // maxNum --- 最大数量 0为不限制. alert('最多只允许添加' + maxNum + '个');.

HTML5中新型input类型

- - WebHek
你可能已经听说过,HTML5里引入了几种新的input类型. 在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等. 而HTML5到来之后,新增的input类型包括:number(数字),date(日期),color(颜色),range(范围)等等.

html中input上传多个文件

- - CSDN博客Web前端推荐文章
如何使用html上传多个文件呢. 我搜索中文怎么也找不到合适的,都是用js动态添加input,然后提交,不能满足我想要的——打开选择文件的窗口后可以一次性选择多个文件. 不过有一个问题,只支持IE10+,连IE9都不支持,o(︶︿︶)o . 其实方法很简单这样只能选择一个文件,这样就可以选择多个文件了,怎么样,很方便吧.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.

Js删除节点

- - JavaScript - Web前端 - ITeye博客
 方式一:传this参数调用方法:.  方式二:js方法中通过选择器获取节点:. //此处删除的是a节点 }. 方式三:通过jQuery方式获取节点:(尚未测试,有待测试. 此处a标签传this到js中,js通过this(即a节点)取parent(即p节点). (1)p.remove();可直接删除整个p节点.

input 输入框获得/失去焦点时隐藏/显示文字

- - CSDN博客Web前端推荐文章
这个标题可能比较拗口不好理解,但是我相信所有的人都见过这个效果,大家可以看本站右上角的搜索输入框,默认显示着“输入搜索内容”的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示“输入搜索内容”的提示. 很多搜索、登录、表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的:.

Math Input Panel – 手写数学公式 | 小众软件 > 办公软件

- chris - 小众软件
讨厌写论文,更讨厌论文里面还有大量的公式. 一会上标、一会下标、一会积分、一会微分,有时还伴有分数等等,一起存在的话人都死了. 毕竟 Word 没有 Latex 写公式来得爽快,可惜 Latex 在“中国高校”不通用. 今天意外发现(也许是我 OUT),原来 windows 自带手写输入公式的软件,名叫 Math Input Panel ,就在开始-附件-数学输入面板可以找到.

IE6/7下移除button、input 默认边框和去掉焦点线

- - CSDN博客推荐文章
. 通常解决这样的bug最好的方法就是在button和input的标签外添加一个标签,然后将样式写在这个标签上,并且把button和input的默认样式都去除掉. 实现方式二:设置CSS,并使用滤镜:.