如何在Javascript中动态添加文本框？

Question

如何在Javascript中动态添加文本框？

javascriptdomtextbox

17

默认情况下，我有5个文本框。当用户点击一个按钮时，应该添加一个文本框。

我该如何实现这个功能？

- noob

9个回答

12

Javascript函数

function add() {

//Create an input type dynamically.
var element = document.createElement("input");

//Create Labels
var label = document.createElement("Label");
label.innerHTML = "New Label";     

//Assign different attributes to the element.
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
element.setAttribute("style", "width:200px");

label.setAttribute("style", "font-weight:normal");

// 'foobar' is the div id, where new fields are to be added
var foo = document.getElementById("fooBar");

//Append the element in page (in span).
foo.appendChild(label);
foo.appendChild(element);
}

Html 部分，

<button id="button" value="Add" onClick:"javascript:add();">

完成了！

- Robin C Samuel

1

在这里，您可以为文本框设置属性，例如CSS属性、值、ID等。 - Robin C Samuel

2

<script>
function add()
{
    document.getElementById("place").innerHTML="<input type='text' value=''>"
}
</script>
<input type="button" value="clickMe" onClick="add();">
<div id="place"></div>

- x2.

1

投票支持这个的人，可能没有意识到使用innerHTML的影响。 - OMG Ponies

1

<script>
function add()
{
    var inpt = document.getElementById('input_template');
    inpt.parentNode.appendChild(inpt.cloneNode(false));
}
</script>

<input type="button" onclick="add();">

将id=input_template设置为预定义文本框之一。

- w35l3y

1

我本可以将其作为独立函数而非内联函数，并且可以使用CSS来保持样式一致，但这似乎是一种聪明的做法，而且它似乎能够工作。 - Daniel Pryden

0

The best I can help is with this code
<html>
  <head>
  </head>
    <body>
      <input type=text id="chat" placeholder="Enter a message..." maxlength="120">
      <input type=Button id="Button" value="Test" onClick="T()">
      <h1 id="message"></h1>

    <script>
    function T() {
      var m = document.getElementById("chat").value
      document.getElementById("message").innerHTML = m
    }
    </script>
    </body>
</html>

- TerribleCoder442

目前你的回答不够清晰，请[编辑]以添加更多细节，帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - J4GD33P 51NGH

0

试一下这个

<html>
<head>
<title>Dynamic Form</title>
<script language="javascript" type="text/javascript" >
function changeIt()
{

createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >"

}
</script>
</head>
<body>

<form name="form">
<input type="button" value="clickHere" onClick="changeIt()">
<div id="createTextbox"></div>
</form> 
</body>
</html>

- anishMarokey

1

投票支持这个的人，可能没有意识到使用innerHTML的影响。 - OMG Ponies

使用 innerHTML 进行无谓的操作，而一个简单的 appendChild() 就可以完成同样的工作，这样做会使程序变得不必要的缓慢。另外，你的 i 变量是怎么回事？它甚至没有被用到，因为该变量在 innerHTML 字符串中没有被扩展，所以你的 HTML 代码会变成 name='mytext' 后面跟着一些浏览器无法理解的垃圾字符。 - Daniel Pryden

innerHTML 只需写入一次即可，对 innerHTML 使用 += 操作符总是错误的。 - bobince

0

通过更改for循环的值，我们可以动态生成文本框

function addFunction() {
  var table = document.getElementById("textbox");
  var rowlen = table.rows.length;
  var row = table.insertRow(rowlen);
  row.id = rowlen;
  var arr = ['textboxfiledname'];
  for (i = 0; i < 2; i++) {
    var x = row.insertCell(i)
    if (i == 1) {
      x.innerHTML = "<input type='button' onclick='removeCell(" + row.id + ")' value=Delete>"
    } else {
      x.innerHTML = "<label>" + arr[i] + ":</label><input type='textbox' name='" + arr[i] + "'>"
    }
  }
}

function removeCell(rowid) {
  var table = document.getElementById(rowid).remove();
}

input[type=text] {
  width: 100%;
  height: 50%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  font-family: sans-serif;
}

input[type=button] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 6px 20px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<fieldset style="margin-left:20%;margin-right:20%;font-family:sans-serif;padding:15px;border-radius:5px;background:#f2f2f2;border:5px solid #1F497D">
  <legend style="background:#1F497D;color:#fff;padding:5px 10px;font-size:22px;border-radius:5px;margin-left:20px;box-shadow:0 0 0 5px #ddd">DynamicTextbox</legend>
  <table id="textbox">
    <tr>
      <td>
        <input type="button" onclick="addFunction()" value="AddTextbox" />
      </td>
    </tr>
  </table>
</fieldset>

- Badri Dongari

0

最好的方法是将事件附加到按钮的 onclick 上，这将使一个 div 的可见性设置为 inline。考虑到灵活性和健壮性，这是我能想到的最好的方法。

请参考此处的示例代码。

- Kyle Rosendo

-1

<!DOCTYPE html>
<html>
<body>
 <h1>My First Web Page</h1>
 <p>My first paragraph.</p>
 <button type="button" onclick="myFunction()">Click me!</button>
 <script>
 var count =0;
 function myFunction() {
 count++
  document.write('Lable1');
  document.write('<input type="text" name="one+count">');
  document.write('Lable2');
  document.write('<input type="text" name="two+count">');

  document.write('Lable3'); 
  document.write('<input type="text" name="three+count">');

  document.write('Lable4');
  document.write('<input type="text" name="four+count">');

  document.write(count);

  }
  </script>

  </body>
  </html>

- vatsal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christian C. Salvadó · Accepted Answer

如果您替换innerHTML，先前输入的值将被清除，为了避免这种情况，您可以通过编程方式附加输入元素：

var input = document.createElement('input'); 
input.type = "text"; 
//...    
container.appendChild(input);

请查看此示例。