如何动态创建 <input type="text"/>
Posted
技术标签:
【中文标题】如何动态创建 <input type="text"/>【英文标题】：How to create <input type=“text”/> dynamically 【发布时间】：2011-08-05 02:40:07 【问题描述】：我想在我的网络表单中动态创建输入类型文本。更具体地说，我有一个文本字段，用户可以在其中输入所需文本字段的数量；我希望以相同的形式动态生成文本字段。
我该怎么做？
【问题讨论】：
【参考方案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
【讨论】：
对不起，我无法在我的表单上显示它？我制作了一个函数，当单击添加按钮时会触发该函数。但我无法弄清楚如何从用户类型的文本字段中获取 vlaue 来创建要创建的文本字段的数量。 . ?如果我还想为这些动态创建的文本字段分配一个 css 类怎么办。 . ? 我在示例中添加了一些代码以显示将其附加到 DOM 并将 CSS 类添加到动态创建的元素。 这不会创建<input ....> 它会创建<input ...></input>【参考方案2】：
使用 Javascript，您只需要document.createElement 和setAttribute。
var input = document.createElement("input");
input.setAttribute('type', 'text');
然后您可以使用appendChild 将创建的元素附加到所需的父元素。
var parent = document.getElementById("parentDiv");
parent.appendChild(input);
【讨论】：
【参考方案3】：创建用户给定的输入字段数
从用户那里获取文本字段的数量并将其分配给一个变量。
var no = document.getElementById("idname").value
要创建输入字段，请使用createElement 方法并指定元素名称，即“输入”作为参数，如下所示并将其分配给变量。
var textfield = document.createElement("input");
然后为变量分配必要的属性。
textfield.type = "text";
textfield.value = "";
最后使用appendChild 方法将变量附加到表单元素。这样输入元素将在表单元素本身中创建。
document.getElementById('form').appendChild(textfield);
循环 2,3 和 4 步骤以创建用户在表单元素中指定的所需数量的输入元素。
for(var i=0;i<no;i++)
var textfield = document.createElement("input");
textfield.type = "text"; textfield.value = "";
document.getElementById('form').appendChild(textfield);
这是完整的代码
function fun()
/*Getting the number of text fields*/
var no = document.getElementById("idname").value;
/*Generating text fields dynamically in the same form itself*/
for(var i=0;i<no;i++)
var textfield = document.createElement("input");
textfield.type = "text";
textfield.value = "";
document.getElementById('form').appendChild(textfield);
<form id="form">
<input type="type" id="idname" oninput="fun()" value="">
</form>【讨论】：
【参考方案4】：也许document.createElement(); 方法就是你要找的。p>
【讨论】：
【参考方案5】：请参阅此答案以获取非 JQuery 解决方案。刚刚帮了我！
Adding input elements dynamically to form
【讨论】：
非常好。我不明白为什么人们一直在用 jquery 举例。谢谢。【参考方案6】：解决方案的核心思想是：
创建一个新的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>但是通常只添加一个输入并没有什么用处，最好在输入中添加一个名称，以便可以轻松地作为表单发送。 这个sn -p还要加个名字：
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>【讨论】：
【参考方案7】：您可以根据他们输入的文本字段的数量循环执行类似的操作。
$('<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。
【讨论】：
可能会提到这取决于 jQuery，因为问题没有指定 jQuery。【参考方案8】：您可以使用createElement() 方法来创建该文本框
【讨论】：
【参考方案9】：我认为以下链接会对您有所帮助。如果您想动态生成字段并同时删除它们，您可以从这里获得帮助。我有同样的问题，所以我得到了答案
$(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/
【讨论】：
这段代码的删除部分相当不完善。如果您添加 2 个输入并删除中间一个，您最终会得到 2 个具有相同 ID 的输入。最好删除带有i--; 的行此外，如果您将其放入由 php 处理的表单中，您将不得不分别处理原始和附加输入字段。【参考方案10】：
你可以使用 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>【讨论】：
【参考方案11】：查询并获取容器 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
【讨论】：
@murb 你也可以贡献【参考方案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 模板现在是生成动态内容的推荐标准。
【讨论】：
值得注意的是，IE 不支持此功能。 MDN docs【参考方案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)
...
generate then 根据输入中的给定值循环：
...
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"/>的主要内容，如果未能解决你的问题，请参考以下文章
jQuery如何获取多个input输入框的值，并存放在一个数组中