转自：http://www.cnblogs.com/damonlan/archive/2011/08/03/2126046.html

昨天，我们公司的网络小组决定为公司做一个内部的网站，主要是为员工比如发布公告啊、填写相应信息、投诉、问题等等需求。我那同事给了我以下需求：

1.点击一个按钮 就增加一个文本框。

2.把新建的文本框的名字命名为 questions[1] ,questions[2],questions[3]....这种形式。

3.可以删除，每次删除最后一个。

4.变色功能。就是当鼠标移入到一个文本框的时候，当前背景色自动的变成灰色。

其他 以后扩展再说。

先不说，上图为好，下面就是最终实现的效果。

整个过程不算太难理解，就是昨天晚上在整那个左边系号的时候 刚开始老是不对。后来整了一个全局变量，在进行判断一下就OK了。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        var count = 1;

        //用来判断是删除 还是增加按钮 以便count值进行计算

        function checkCount(boolOK, coun) {

            if (boolOK == true) {

                return count++;

            }

            else {

                count--;

            }

        }

        //添加一个input标签 同时也对它的ID和Name进行赋值。

        function AddInput() {

            // checkCount(2, true);

            countAA = checkCount(true, count);

            // alert(countAA);

            //count++;

            var question = document.getElementById("question");

            //创建span

            var span = document.createElement("span");

            span.id = "lbl" + count;

            span.innerText = "您的第" + count + "个问题： ";

            question.appendChild(span);

            //创建input

            var input = document.createElement("input");

            input.type = "text";

            input.id = "questions[" + count + "]";

            input.name = "questions[" + count + "].name";

            question.appendChild(input);

            //创建一个空格

            var br = document.createElement("br");

            question.appendChild(br);

        }

        //每次删除最后一个input标签

        function DecInput() {

            var count2 = 0

            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++) {

                var input = inputs[i];

                if (input.type == "text") {

                    count2++;

                }

            }

            var question = document.getElementById("question");

            var whichInput = document.getElementById("questions[" + count2 + "]");

            var whichSpan = document.getElementById("lbl" + count2 + "");

            question.removeChild(whichInput);

            question.removeChild(whichSpan);

            var brs = document.getElementsByTagName("br");

            question.removeChild(brs[count2 - 1]);

            checkCount(false, count2);

        }

        function TestClick() {

            var q2 = document.getElementById("questions[4]");

            if (q2) {

                alert("OK");

            }

            else {

                alert("No...");

            }

        }

        function initEvent() {

            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++) {

                var input = inputs[i];

                if (input.type == "text") {

                    input.onmouseout = myOnmouseout;

                    input.onfocus = myOnfocus;

                }

            }

        }

        function myOnmouseout() {

            this.style.backgroundColor = "white";

        }

        function myOnfocus() {

            this.style.backgroundColor = "gray";

        }

    </script>

</head>

<body onmousemove="initEvent()">

    <fieldset style="width: 500px; margin-left: 200px;">

        <legend>

            <h6>

                亲爱的用户，请输入您的问题</h6>

        </legend>

        <div id="question" style="border: 1px solid red;">

            <span id="span1">您的第1个问题：</span>

            <input id="Text1" type="text" /><br />

        </div>

        <div style="margin-top: 100px;">

            <input id="btnAddInput" type="button" value="新增一个Input" onclick="AddInput()" />

            <input id="btnDecre" type="button" value="删除一个Input" onclick="DecInput()" />

            <input id="Button1" type="button" value="测试" onclick="TestClick()" />

        </div>

    </fieldset>

</body>

</html>

javascript实现自动添加文本框功能的更多相关文章

  1. javascript 文字大小自动适应文本框 （文字大小自动调整）

    javascript 文字大小自动适应文本框 (文字大小自动调整) TOC 思考 思考一:面积法 思考二:微调法 代码 在进行类似微博墙之类的展示页面中,经常会遇到这样的需求:在固定大小的区域放入字数 ...

  2. AutoCompleteTextView自动完成文本框

    AutoCompleteTextView是从EditText派生出来的,比普通编辑框多了一个功能,当用户输入一定字符后,自动完成文本框会显示一个下拉单,供用户选择,当选中一个后,被选中的内容会显示在文 ...

  3. Android 自学之自动完成文本框 AutoCompleteTextView

    自动完成文本框(AutoCompleteTextView)从EditText派生而出,实际上他也是一个编辑框,但他比普通的编辑框多了一个功能:当用户输入一定字符后,自动完成文本框会显示一个下拉菜单,供 ...

  4. Android开发10.2：UI组件AutoCompleteTextView(自动完成文本框)

    概述 AutoCompleteTextVeiw(自动完成文本框)从 EditText派生而出  PS :EditText用法介绍           当用户输入一定字符后,自动完成自动完成文本框会显示 ...

  5. Android零基础入门第47节：自动完成文本框AutoCompleteTextView

    原文:Android零基础入门第47节:自动完成文本框AutoCompleteTextView 上一期学习的Spinner的使用,掌握的怎么样?本期一起来学习AutoCompleteTextView的 ...

  6. android脚步---自动完成文本框

    自动完成文本框AutoCompleteTextView,当用户输入一定字符时,自动完成文本框会显示一个下拉菜单,供用户选择,设置一个Adapter,该Adapter中封装了AutoCompleteTe ...

  7. 用JS添加文本框案例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. matlab图形中添加文本框

    图形中添加文本框,自己目前了解到了两种方法:1.用legend函数就可以对图形标注,形成一个文本框: 2.就是用annotation('textbox',[0.2,0.2.0.1,0.3],'Line ...

  9. 通过jquery来实现文本框和下拉框动态添加效果，能根据自己的需求来自定义最多允许添加数量，实用的jquery动态添加文本框特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  2. Oracle自制事务

    数据库事务是一种单元操作,要么全部操作成功,要么全部失败.在Oracle中,一个事务是从执行第一个数据操作语言(DML)语句开始的,直到执行一个COMMIT语句,提交保存事务,或执行一个ROLLBAC ...

  3. 大数据量.csv文件导入SQLServer数据库

    前几天拿到了一个400多M的.csv文件,在电脑上打开要好长时间,打开后里面的数据都是乱码.因此,做了一个先转码再导入数据库的程序.100多万条的数据转码+导入在本地电脑上花了4分钟,感觉效率还可以. ...

  4. Tensorflow学习笔记----基础（3）

    目录: 一.TensorFlow的系统架构 二.TensorFlow的设计理念 三.TensorFlow的运行流程 四.TensorFlow的编程模型:边.节点.图.设备.变量.变量初始化.内核 五. ...

  5. Django REST Framework 序列化和校验 知识点

    DRF序列化 Django ORM对象 --> JSON格式的数据 序列化 JSON格式的数据 --> Django ORM数据 反序列化 需要两个工具: from rest_framew ...

  6. AjAX 常用参数

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  7. [luogu] P2519 [HAOI2011]problem a （贪心）

    P2519 [HAOI2011]problem a 题目描述 一次考试共有n个人参加,第i个人说:"有ai个人分数比我高,bi个人分数比我低."问最少有几个人没有说真话(可能有相同 ...

  8. COJS 1752. [BOI2007]摩基亚Mokia

    1752. [BOI2007]摩基亚Mokia ★★★   输入文件:mokia.in   输出文件:mokia.out   简单对比时间限制:5 s   内存限制:128 MB [题目描述] 摩尔瓦 ...

  9. mysql5.7官网直译SQL语句优化--分组优化

    1.14Group By Optimization 分组优化 大多数方法为了满足分组查询需要扫描整个表并且创建一个临时表,其中每组中的值都是连续的,如果可以使用聚合函数和临时表获取各个分组.在某些情况 ...

  10. Nginx Zabbix

    https://www.cnblogs.com/wangxiaoqiangs/archive/2016/04/20/5412111.html