转自：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. js文字排序的方法

    拼音排序: , b: , b: , b: , b: , b: , b: , b: "不" }]; arr.sort( function compareFunction(param1 ...

  2. 简述RNN Recurrent Neural Networks

    本文结构: 什么是 Recurrent Neural Networks ? Recurrent Neural Networks 的优点和应用? 训练 Recurrent Neural Networks ...

  3. .net 三大核心对象

    .net 三大核心对象 HttpRequest 现在总算轮到第一个核心对象出场了.MSDN给它作了一个简短的解释:“使 ASP.NET 能够读取客户端在 Web 请求期间发送的 HTTP 值.”这个解 ...

  4. 初学C#，总结一下.sln和.csproj的区别

    1.sln:solusion 解决方案 csproj:c sharp project C#项目 csproj文件大家应该不会陌生,那就是C#项目文件的扩展名,它是“C Sharp Project”的缩 ...

  5. https://blog.csdn.net/sxf359/article/details/71082404

    https://blog.csdn.net/sxf359/article/details/71082404

  6. zabbix-agent端自定义监控项（free -m)服务器内存使用率

    Agent端操作 [root@agent ~]# vim /usr/local/zabbix/etc/zabbix_agentd.conf 末行追加 UserParameter=memory_user ...

  7. 为Electron 安装 vue-devtool等扩展

    相关代码: https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js 在SPA逐渐成为构建优秀交互体验应 ...

  8. python基础知识部分练习大全

    python基础知识部分练习大全   1.执行 Python 脚本的两种方式 答:1.>>python ../pyhton.py 2. >>python.py   #必须在首行 ...

  9. 紫书 习题7-8 UVa 12107 (IDA*)

    参考了这哥们的博客 https://blog.csdn.net/hyqsblog/article/details/46980287  (1)atoi可以char数组转int, 头文件 cstdlib ...

  10. [luogu] P4823 [TJOI2013]拯救小矮人（贪心）

    P4823 [TJOI2013]拯救小矮人 题目描述 一群小矮人掉进了一个很深的陷阱里,由于太矮爬不上来,于是他们决定搭一个人梯.即:一个小矮人站在另一小矮人的 肩膀上,知道最顶端的小矮人伸直胳膊可以 ...