转自：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. Java从入门到精通一步到位！

    Java作为近几年来非常火的编程语言,转行来做Java的人不计其数,但如今真正的人才仍然匮乏,所以学习Java一定要有一个系统的学习规划课程.阿里云大学帮您规划Java学习路线可以帮助您从一个小白成长 ...

  2. Job for mysqld.service failed because the control process exited with error code

    启动MySQL时抛出: Job for mysqld.service failed because the control process exited with error code. See &q ...

  3. Vue轮播图插件---Vue-Awesome-Swiper

    轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...

  4. Spring 7大功能模块的作用

    1.   Spring 7大功能模块的作用 1)   核心容器(Spring core) 核心容器提供Spring框架的基本功能.Spring以bean的方式组织和管理Java应用中的各个组件及其关系 ...

  5. Apache Tez 0.7、0.83、 0.82 安装、调试笔记

    ———————————————————— 准备 Tez 编译环境 ———————————————————— 1 需要的支持 tez0.7 需要 Hadoop 2.60 以上 2 需要的 linux 相 ...

  6. Spring中 @Autowired标签与 @Resource标签 的区别（转）

    spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. 1. @Autowi ...

  7. Fedora 17 无线网卡配置笔记

    转载:http://www.psichen.com/fedora-17-wifi/ 安装并更新完F17后,在网络选项中没有出现无线网,需要自己安装无线网卡驱动.而F17中默认网卡名称从以前的”eth0 ...

  8. HDU 4332 Contest 4

    顶好的一道题.其实,是POJ 2411的升级版.但POJ 2411我用的插头DP来做,一时没想到那道题怎么用状态DP,于是回头看POJ 2411那一道的状态DP,其实也很简单,就是每一行都设一个状态, ...

  9. struct和typedef

    struct Test { int i; }; 解析:此处声明一个Test的结构体. 使用:在C语言中:struct Test t(此处的struct不可省略),在C++中:Test t(能够省略st ...

  10. 取消记录tableView选中效果

    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [self. ...