js添加删除文本框

最新推荐文章于 2024-02-19 09:59:58 发布
最新推荐文章于 2024-02-19 09:59:58 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： java Java 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Com_ma/article/details/77340964
版权
java 同时被 2 个专栏收录
325 篇文章 1 订阅
订阅专栏
Java
299 篇文章 5 订阅
订阅专栏
  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 οnmοusemοve="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" οnclick="AddInput()" />  
  114.             <input id="btnDecre" type="button" value="删除一个Input" οnclick="DecInput()" />  
  115.             <input id="Button1" type="button" value="测试" οnclick="TestClick()" />  
  116.         </div>  
  117.     </fieldset>  
  118. </body>  
  119. </html>
lm_y
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript 文本框
Elna_99的博客
10-19 5734
在HTML中，有两种方式表示文本框：一种是用标签，其type值设置为text，这种设出来使单行文本框，另一种是多行文本框，使用。他们之间有一些重要的区别。 标签：通过设置size特性，能够指定显示的字符数；通过value特性，可以设置初始值；maxlength能够设置能够显示的最大字符数； 通过设置rows,cols特性可以设置行列；与标签不同，的初始值不是在特性里设置的，而是由标签包围；而且
js总结：增加和减少文本框
weixin_30593443的博客
04-11 110
<head><script>var count = 0; function add(){ if(count<3) { count++; var x= document.createElement("input"); x.setAttribute("type","text"); x.setAttribute("name","gjdw"+count); x.s...
JS（十三）文本框脚本
前端产品工程师
06-01 1167
HTML中两种方式表现文本框： 1、input 2、textarea 区别在于： 1、要表现文本框，必须将元素的type特性设置为"text"。而通过设置size特性，可以指定文本框中能够显示的字符数。通过value特性，可以设置文本框的初始值，而maxlength特性则用于指定文本框可以接受的最大字符数。 2、元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用rows 和
javascript基础学习系列四百七十九：文本框编程
最新发布
wanmeijuhao的博客
02-19 681
在 HTML 中有两种表示文本框的方式:单行使用元素，多行使用元素。这两 个控件非常相似，大多数时候行为也一样。不过，它们也有非常重要的区别。默认情况下，元素显示为文本框，省略 type 属性会以"text"作为默认值。然后可以通过 图灵社区会员 eraylee(eraylee@live.com) 专享 尊重版权。
显示或隐藏文本框（js）
m0_73879433的博客
10-22 678
具体实现代码如下所示。
js添加删除行和双击变文本框的脚本
10-30
发现我JS真的还有很多要学，下面只是我的练习作品，代码很多是网上的。
javascript 动态添加/删除 文本框
02-18
可以动态的添加 删除 文本框！代码几乎不用修改就直接能用，简单方便
JS添加删除一组文本框并对输入信息加以验证判断其正确性
10-27
需要添加几组数据到数据库，但是具体几组数据不确定，有客户来填写，所以，这里我用JS进行添加删除子方案，并要对方案输入的正确性加以判断，感兴趣的朋友可以了解下
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
10-26
在本文中，我们将深入探讨如何使用JavaScript（js）在前端动态添加文本框，并在后端获取这些文本框的内容。这是一个常见的需求，特别是在构建交互式Web应用程序时，用户可能需要输入多个相似的数据项。 首先，我们...
Javascript & DOM 中的文本框textbox
hero4u的专栏
03-29 3259
表单元素1、文本框textbox文本框有两种形式一种是 单行文本框 一种是多行文本域使用文本输入框的时候可以限定输入字符的长度，以及文本框的长度，还有设置默认的值使用文本域的时候可以设置多少行多少列，以及初始值。（strict.dtd中行列数必须设定）initial value2、获取|改变文本框的值可以看一下这个例子，通过id来获取文本框，然后获取value属性的值Retrieving a
JS 文本框相关
wwy6191的博客
10-07 172
1.让文本框内的值处于选定状态。 input.select();
Js实现动态插入删除文本框
于大大大洋
11-10 2501
Untitled Document var qus = new Array(); function Question() { this.qno = qus.length; this.ono = 0; this.create = function(table) { var qstr = ""; qstr += "问题  " + (
jQuery + JavaScript 实现的动态添加文本框功能 和 动态删除文本框功能（二）
reggergdsg的博客
01-15 5979
接着上一篇 jQuery + JavaScript 实现的动态添加文本框功能（一） 来说。首先看一下效果图： 1，jQuery实现的动态添加文本框和动态删除文本框的功能-1-操作前.jpg 2，jQuery实现的动态添加文本框和动态删除文本框的功能-2-添加3个文本框.jpg 3，jQuery实现的动态添加文本框和动态删除文本框的功能-3
js动态的在页面上增加或删除一个文本框
dusea的博客
08-31 3834
转自http://www.5xsj.net/program/8/22/297.html js动态的在页面上增加或删除一个文本框 <!-- var textNumber = 1; function addTextBox(form, afterElement) { // Increment the textbox number textNumber++; // Create
用javascript实现点击按钮删除一个文本框
weixin_44195250的博客
10-15 1961
用javascript实现点击按钮删除一个文本框 给删除按钮添加点击事件： onclick="delInput()"; js这样写： function deleInput(){ var el = document.getElementById('aaa'); el.parentNode.removeChild(el); }
JS清空输入文本框内容
热门推荐
阳光大男孩！！！的博客
07-21 2万+
通过JS的DOM对象进行操作 <script> function clear_content() { document.getElementById("username").value=""; document.getElementById("password").value=""; } ...
js实现下拉表单添加到文本框里的添加和删除完整代码
06-02
以下是一个完整的示例代码，演示如何使用JavaScript实现将下拉表单中的选项添加到文本框中，以及删除文本框中的选项： ```html <!DOCTYPE html> <title>Select操作示例 <!-- 创建下拉表单 --> 选项1 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lm_y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值