代码改变世界

javascript实现自动添加文本框功能

2011-08-03 12:41  随风浪迹天涯  阅读(2654)  评论(0)  编辑  收藏  举报

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

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

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

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

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

其他 以后扩展再说。

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

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

代码如下：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
  6     <script type="text/javascript">
  7         var count = 1;
  8 
  9         //用来判断是删除 还是增加按钮 以便count值进行计算
 10         function checkCount(boolOK, coun) {
 11             if (boolOK == true) {
 12                 return count++;
 13             }
 14             else {
 15                 count--;
 16             }
 17         }
 18 
 19         //添加一个input标签 同时也对它的ID和Name进行赋值。
 20         function AddInput() {
 21             // checkCount(2, true);
 22             countAA = checkCount(true, count);
 23             // alert(countAA);
 24             //count++;
 25             var question = document.getElementById("question");
 26 
 27             //创建span
 28             var span = document.createElement("span");
 29             span.id = "lbl" + count;
 30             span.innerText = "您的第" + count + "个问题： ";
 31             question.appendChild(span);
 32 
 33             //创建input
 34             var input = document.createElement("input");
 35             input.type = "text";
 36             input.id = "questions[" + count + "]";
 37             input.name = "questions[" + count + "].name";
 38             question.appendChild(input);
 39 
 40             //创建一个空格
 41             var br = document.createElement("br");
 42             question.appendChild(br);
 43         }
 44 
 45         //每次删除最后一个input标签
 46         function DecInput() {
 47             var count2 = 0
 48             var inputs = document.getElementsByTagName("input");
 49             for (var i = 0; i < inputs.length; i++) {
 50                 var input = inputs[i];
 51                 if (input.type == "text") {
 52                     count2++;
 53                 }
 54             }
 55 
 56             var question = document.getElementById("question");
 57 
 58             var whichInput = document.getElementById("questions[" + count2 + "]");
 59             var whichSpan = document.getElementById("lbl" + count2 + "");
 60 
 61             question.removeChild(whichInput);
 62             question.removeChild(whichSpan);
 63 
 64             var brs = document.getElementsByTagName("br");
 65             question.removeChild(brs[count2 - 1]);
 66 
 67             checkCount(false, count2);
 68         }
 69 
 70 
 71 
 72         function TestClick() {
 73             var q2 = document.getElementById("questions[4]");
 74             if (q2) {
 75                 alert("OK");
 76             }
 77             else {
 78                 alert("No...");
 79             }
 80         }
 81 
 82         function initEvent() {
 83             var inputs = document.getElementsByTagName("input");
 84             for (var i = 0; i < inputs.length; i++) {
 85                 var input = inputs[i];
 86                 if (input.type == "text") {
 87                     input.onmouseout = myOnmouseout;
 88                     input.onfocus = myOnfocus;
 89                 }
 90             }
 91         }
 92 
 93         function myOnmouseout() {
 94             this.style.backgroundColor = "white";
 95         }
 96 
 97         function myOnfocus() {
 98             this.style.backgroundColor = "gray";
 99         }
100     </script>
101 </head>
102 <body onmousemove="initEvent()">
103     <fieldset style="width: 500px; margin-left: 200px;">
104         <legend>
105             <h6>
106                 亲爱的用户，请输入您的问题</h6>
107         </legend>
108         <div id="question" style="border: 1px solid red;">
109             <span id="span1">您的第1个问题：</span>
110             <input id="Text1" type="text" /><br />
111         </div>
112         <div style="margin-top: 100px;">
113             <input id="btnAddInput" type="button" value="新增一个Input" onclick="AddInput()" />
114             <input id="btnDecre" type="button" value="删除一个Input" onclick="DecInput()" />
115             <input id="Button1" type="button" value="测试" onclick="TestClick()" />
116         </div>
117     </fieldset>
118 </body>
119 </html>