Question

我想动态地在我的网络表单中创建输入类型文本。更具体地说，我有一个文本字段，用户输入所需文本字段的数量;我希望以相同的形式动态生成文本字段。

我该怎么做？

Answer 1

使用JavaScript：

var input = document.createElement("input");
input.type = "text";
input.className = "css-class-name"; // set the CSS class
container.appendChild(input); // put it into the DOM

Answer 2

使用Javascript，您只需document.createElement和setAttribute。

var input = document.createElement("input");
input.setAttribute('type', 'text');

然后，您可以使用appendChild将创建的元素附加到所需的父元素。

var parent = document.getElementById("parentDiv");
parent.appendChild(input);

Answer 3

也许方法document.createElement();正是您所寻找的。

Answer 4

您可以根据输入的文本字段数量在循环中执行此类操作。

$('<input/>').attr({type:'text',name:'text'+i}).appendTo('#myform');

但是为了获得更好的性能，我首先创建所有的html，然后只将它注入DOM一次。

var count = 20;
var html = [];
while(count--) {
  html.push("<input type='text' name='name", count, "'>");
}
$('#myform').append(html.join(''));

编辑这个例子使用jQuery来附加html，但你也可以轻松修改它以使用innerHTML。

Answer 5

您可以使用createElement()方法创建该文本框

Answer 6

我认为以下链接会对您有所帮助。如果您想要动态生成字段并希望在同一时间删除它们，您可以从此处获得帮助。我有同样的问题，所以我得到了答案

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').live('click', function() { 
                if( i > 2  ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

http://jsfiddle.net/jaredwilli/tZPg4/4/

Answer 7

有关非JQuery解决方案，请参阅此答案。刚刚帮帮我了！

Adding input elements dynamically to form

Answer 8

这是我的解决方法

function fun() {
/*getting the number of text field*/
var no = document.getElementById("idname").value;
/*text fields to be generated dynamically in the same form*/
  for(var i=0;i<no;i++) 
   {
    var textfield = document.createElement("input");
    textfield.type = "text";
    textfield.id = "idname4textfeild"; 
    textfield.setAttribute("value","");
    document.getElementById('form').appendChild(textfield);
  }
}

<form id="form">
    <input type="type" id="idname" oninput="fun()" value="">
</form>

Answer 9

您可以使用ES6后退

  var inputs = [
        `<input type='checkbox' id='chbox0' onclick='checkboxChecked(this);'> <input  type='text' class='noteinputs0'id='note` + 0 + `' placeholder='task0'><button  id='notebtn0'                     >creat</button>`, `<input type='text' class='noteinputs' id='note` + 1 + `' placeholder='task1'><button  class='notebuttons' id='notebtn1' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 2 + `' placeholder='task2'><button  class='notebuttons' id='notebtn2' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 3 + `' placeholder='task3'><button  class='notebuttons' id='notebtn3' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 4 + `' placeholder='task4'><button  class='notebuttons' id='notebtn4' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 5 + `' placeholder='task5'><button  class='notebuttons' id='notebtn5' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 6 + `' placeholder='task6'><button  class='notebuttons' id='notebtn6' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 7 + `' placeholder='task7'><button  class='notebuttons' id='notebtn7' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 8 + `' placeholder='task8'><button  class='notebuttons' id='notebtn8' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 9 + `' placeholder='task9'><button  class='notebuttons' id='notebtn9' >creat</button>`
    ].sort().join(" ");
   document.querySelector('#hi').innerHTML += `<br>` +inputs;

<div id="hi"></div>

Answer 10

查询并获取容器DOM元素
创建新元素
将新元素放入文档树

//Query some Dib region you Created
let container=document.querySelector("#CalculationInfo .row .t-Form-itemWrapper");
let input = document.createElement("input");

//create new Element  for apex
input.setAttribute("type","text");
input.setAttribute("size","30");
containter.appendChild(input); // put it into the DOM

Answer 11

解决方案的核心思想是：

创建一个新的input元素
添加类型text
将元素附加到DOM

这可以通过以下简单脚本完成：

var input = document.createElement('input');
input.setAttribute('type', 'text');
document.getElementById('parent').appendChild(input);

现在的问题是，如何使此过程动态化。如问题中所述，在用户输入要生成的输入数量的地方还有另一个输入。可以按照以下步骤进行操作：

function renderInputs(el){
  var n = el.value && parseInt(el.value, 10);
  if(isNaN(n)){
    return;
  }
  
  var input;
  var parent = document.getElementById("parent");
  
  cleanDiv(parent);
  for(var i=0; i<n; i++){
    input = document.createElement('input');
    input.setAttribute('type', 'text');
    parent.appendChild(input);
  }
}

function cleanDiv(div){
  div.innerHTML = '';
}

Insert number of input to generate: </br>
<input type="text" onchange="renderInputs(this)"/>

<div id="parent">
Generated inputs:
</div>

，但是通常只添加一个输入并不是真正有用的，最好在输入中添加一个名称，以便可以轻松地将其作为表单发送。此代码段还添加了一个名称：

function renderInputs(el){
  var n = el.value;
  var input, label;
  var parent = document.getElementById("parent");
  cleanDiv(parent);
  
  el.value.split(',').forEach(function(name){
    input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('name', name);
    label = document.createElement('label');
    label.setAttribute('for', name);
    label.innerText = name;
    parent.appendChild(label);
    parent.appendChild(input);
    parent.appendChild(document.createElement('br'));
  });
}

function cleanDiv(div){
  div.innerHTML = '';
}

Insert the names, separated by comma, of the inputs to generate: </br>
<input type="text" onchange="renderInputs(this)"/>
<br>
Generated inputs: </br>
<div id="parent">

</div>

Answer 12

<button id="add" onclick="add()">Add Element</button>

<div id="hostI"></div>

<template id="templateInput">
    <input type="text">
</template>

<script>
    function add() {

        // Using Template, element is created
        var templateInput = document.querySelector('#templateInput');
        var clone = document.importNode(templateInput.content, true);

        // The Element is added to document
        var hostI = document.querySelector('#hostI');
        hostI.appendChild(clone);
    }

</script>

HTML模板现在是生成动态内容的推荐标准。

Answer 13

试试这个：

function generateInputs(form, input) {
  x = input.value;
  for (y = 0; x > y; y++) {
    var element = document.createElement('input');
    element.type = "text";
    element.placeholder = "New Input";
    form.appendChild(element);
  }
}

input {
  padding: 10px;
  margin: 10px;
}

<div id="input-form">
  <input type="number" placeholder="Desired number of inputs..." onchange="generateInputs(document.getElementById('input-form'), this)" required><br>
</div>

上面的代码有一个表单，其中的输入接受一个数字：

<form id="input-form">
  <input type="number" placeholder="Desired number of inputs..." onchange="generateInputs(document.getElementById('input-form'), this)"><br>
</form>

输入运行一个函数onchange，这意味着当用户输入一个数字并点击提交时，它运行一个函数。用户要求在提交之前用一个值填写输入。该值必须是数字。提交父表单后，输入将传递给函数：

...
generateInputs(document.getElementById('input-form'), this)
...

然后生成根据输入中的给定值循环：

...
x = input.value;
for (y=0; x>y; y++) {
...

然后它在表单内生成一个输入，在每个循环中：

...
var element = document.createElement('input');
element.type = "text";
element.placeholder = "New Input";
form.appendChild(element);
...

我还添加了一些 CSS 样式以使 inputs 看起来不错，还有一些 placeholders。要阅读有关创建元素 createElement() 的更多信息：

<块引用>

https://www.w3schools.com/jsref/met_document_createelement.asp

要阅读有关 for 循环的更多信息：

<块引用>

https://www.w3schools.com/js/js_loop_for.asp

如何动态创建<input type =“”text“/”/>

13 个答案: