转自：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. 立即调用函数（IIFE)

    定义: IIFE:立即调用的函数表达式,声明函数的同时立即调用这个函数. 语法: IIFE的常用写法:这两种写法的作用相同,只是表现形式不同而已,()只是起了自执行的作用 (function(){.. ...

  2. mvc模式开发

  3. Codeforces Round #468 (Div. 2 )D. Peculiar apple-tree_BFS

    题目简单,不多解释. Code: #include<cstdio> #include<queue> using namespace std; const int maxn = ...

  4. ios 人魔七七

    http://www.cnblogs.com/qiqibo/category/533488.html

  5. django-3-模板变量,过滤器,静态文件的引用

    <<<模板变量>>> (1)定义视图函数 通过context传递参数来渲染模板,context要是个字典 当模板变量为可调用对象的时候,函数不传递参数 (2)配置模 ...

  6. Vijos 1456 最小总代价 （状压dp）

    看到这道题n只有16,就可以想到状压dp 每个人只有经过或者没经过,那就用1表示经过,0表示没经过 但是不是当前在谁那里,所以再加一维来记录 所以f[state][i]表示在物品在i,当前的状态是st ...

  7. Linux下的进程环境

    僵尸进程.孤儿进程.守护进程.进程组.会话.前台进程组.后台进程组 1,僵尸进程 子进程结束,父进程没有明确的答复操作系统内核:已收到子进程结束的消息.此时操作系统内核会一直保存该子进程的部分PCB信 ...

  8. PatentTips - Safe general purpose virtual machine computing system

    BACKGROUND OF THE INVENTION The present invention relates to virtual machine implementations, and in ...

  9. Application Loader提交ipa文件出现ERROR ITMS-90022问题解决方式

    话说在提交app到AppStore时出现了一些问题.网上找了一些资料,但不并具体.因此我做了一个总结,方便我以后遇到时可查询. 也希望能帮助遇到这个问题的提供解决方式. ERROR ITMS-9002 ...

  10. LintCode-交叉字符串

    给出三个字符串:s1.s2.s3,推断s3是否由s1和s2交叉构成. 您在真实的面试中是否遇到过这个题? Yes 例子 比方 s1 = "aabcc" s2 = "dbb ...