當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
javascript实现自动添加文本框功能
生活随笔
收集整理的這篇文章主要介紹了
javascript实现自动添加文本框功能
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
轉(zhuǎn)自：http://www.cnblogs.com/damonlan/archive/2011/08/03/2126046.html
昨天，我們公司的網(wǎng)絡(luò)小組決定為公司做一個(gè)內(nèi)部的網(wǎng)站，主要是為員工比如發(fā)布公告啊、填寫相應(yīng)信息、投訴、問(wèn)題等等需求。我那同事給了我以下需求：
1.點(diǎn)擊一個(gè)按鈕 就增加一個(gè)文本框。
2.把新建的文本框的名字命名為 questions[1] ,questions[2],questions[3]....這種形式。
3.可以刪除，每次刪除最后一個(gè)。
4.變色功能。就是當(dāng)鼠標(biāo)移入到一個(gè)文本框的時(shí)候，當(dāng)前背景色自動(dòng)的變成灰色。
其他 以后擴(kuò)展再說(shuō)。
先不說(shuō)，上圖為好，下面就是最終實(shí)現(xiàn)的效果。
整個(gè)過(guò)程不算太難理解，就是昨天晚上在整那個(gè)左邊系號(hào)的時(shí)候 剛開始老是不對(duì)。后來(lái)整了一個(gè)全局變量，在進(jìn)行判斷一下就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;//用來(lái)判斷是刪除 還是增加按鈕 以便count值進(jìn)行計(jì)算function checkCount(boolOK, coun) {if (boolOK == true) {return count++;}else {count--;}}//添加一個(gè)input標(biāo)簽 同時(shí)也對(duì)它的ID和Name進(jìn)行賦值。function AddInput() {// checkCount(2, true); countAA = checkCount(true, count);// alert(countAA);//count++;var question = document.getElementById("question");//創(chuàng)建spanvar span = document.createElement("span");span.id = "lbl" + count;span.innerText = "您的第" + count + "個(gè)問(wèn)題： ";question.appendChild(span);//創(chuàng)建inputvar input = document.createElement("input");input.type = "text";input.id = "questions[" + count + "]";input.name = "questions[" + count + "].name";question.appendChild(input);//創(chuàng)建一個(gè)空格var br = document.createElement("br");question.appendChild(br);}//每次刪除最后一個(gè)input標(biāo)簽function DecInput() {var count2 = 0var 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>親愛的用戶，請(qǐng)輸入您的問(wèn)題</h6></legend><div id="question" style="border: 1px solid red;"><span id="span1">您的第1個(gè)問(wèn)題：</span><input id="Text1" type="text" /><br /></div><div style="margin-top: 100px;"><input id="btnAddInput" type="button" value="新增一個(gè)Input" onclick="AddInput()" /><input id="btnDecre" type="button" value="刪除一個(gè)Input" onclick="DecInput()" /><input id="Button1" type="button" value="測(cè)試" onclick="TestClick()" /></div></fieldset> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/tine/p/7448486.html
總結(jié)
以上是生活随笔為你收集整理的javascript实现自动添加文本框功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： go map数据结构
- 下一篇： Spring 中的 LocalSessi