转自：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. Custom Hosting in IIS/WAS

    常常需要与宿主实例进行交互.这对于使用自托管的方式是不可或缺的.当使用IIS或WAS时,不能直接访问宿主.为了克服这个障碍,WCF提供了一个宿主工厂.在.svc文件中使用Factory标签,使用此工厂 ...

  2. here.less

    <html><head><title>Test Less</title><link rel="stylesheet/less" ...

  3. PHP小常识分享

    PHP 标记 当解析一个文件时,PHP 会寻找起始和结束标记,也就是 <?php 和 ?>,这告诉 PHP 开始和停止解析二者之间的代码.此种解析方式使得 PHP 可以被嵌入到各种不同的文 ...

  4. ES6 学习6 数组的扩展

    本章学习要点: 扩展运算符 Array.from() Array.of() 数组实例的 copyWithin() 数组实例的 find() 和 findIndex() 数组实例的 fill() 数组实 ...

  5. node 常用命令行

    安装模块命令 npm install moduleName –save npm install moduleName npm install npm start express创建项目目录 expre ...

  6. linux上重启jboss服务器

    ps -ef|grep jboss  :查看当前jboss进程 kill -9 进程id         :杀掉进程,kill -9发送的信号是SIGKILL,即exit.exit信号不会被系统阻塞 ...

  7. Cygwin（类UNIX模拟环境）&CURL（强大的http命令行工具）

    前言: 需要我用curl试下能否发送post请求调起公司的仿真系统(目前) 跟着大佬的脚步,亲测一把~ 感谢大佬的提供的博客和指导 @咩神 个人博客园及来源地址 Cygwin(类UNIX模拟环境) 一 ...

  8. 原生JS中 callback，promise，generator，async-await 的简介

    callback,promise,generator,async-await 的简介 javascript异步的发展历程. ES6 以前: 回调函数(callback):nodejs express ...

  9. Having用法

    HAVING 子句对 GROUP BY 子句设置条件的方式与 WHERE 和 SELECT 的交互方式类似.WHERE 搜索条件在进行分组操作之前应用:而 HAVING 搜索条件在进行分组操作之后应用 ...

  10. ubuntu 14.04服务器上使用nginx搭建wordpress博客详解

    过程详解 1.更新apt-get sudo apt-get update 2.安装nginx sudo apt-get install nginx 3.启动nginx sudo service ngi ...