我需要使用JavaScript / jQuery在onkeypress事件上动态创建一些多输入字段。
我有一个文本框，当用户在该文本区域输入任意键时，两个输入字段和第二个文本框正在打开。当用户再次在第二个文本框中输入任何键时，将打开另外两个输入字段和第三个文本框，依此类推。还有一个十字按钮正在创建以关闭每组文本框。在我目前的代码中，我这样做将所有字段设置为静态，因为用户可以创建许多输入字段，以便我想要使用不同的name and id动态创建它们。
我的代码是in this Plunkr。
答案 0 :(得分：1)
如果您具有创建输入字段的特定字段，则可以轻松完成此操作。例如，我将输入字段加载到document.body
每次拨打newinput()时，都会在parent中创建一个输入字段，id从input0开始，每次递增
var id = 0;
var newinput = function() {
var parent = document.body
var field = document.createElement("input")
field.className = "myclassname"
field.style = "display:block;"
field.id = "input" + id;
parent.appendChild(field);
id += 1;
}<body>
<div>Click plus to add input</div>
<button type="button" name="button" onclick="newinput()">+</button>
</body>
在您的情况下，看起来您想添加一个组，您可以这样做：
var fieldgroup = document.querySelector(".questionshowp .form-group").cloneNode(true); // (1)
var addinput = function(){
var parent = this.parentNode.parentNode.parentNode; // (2)
var n = parent.querySelectorAll(".form-control").length
var f = fieldgroup.cloneNode(true);
f.children[0].id = "question"+n // (3)
f.querySelector(".secondsec").querySelector("button.btn-success").onclick = addinput // (4)
parent.insertBefore(f,parent.querySelector(".clear")); // (5)
}
field-group的副本以用作模板id
将此函数应用于所有addinput()按钮的最简单方法是使用JQuery
+ 需要位于html文件的底部，并位于$("button.btn-sm.btn-success").on("click", addinput)
定义
原来我写了所有这些，只是意识到我误解了你的问题。 我们仍然可以使用相同的原则来做我认为你在问的问题
addinput()master = document.querySelector(".aquestionpart"); // (1)
form = document.querySelector(".questionparts"); // (2)
function show(){
var f = form.cloneNode(true);
var n = master.querySelectorAll(".questionparts").length;
f.id = "questionparts"+(n+1); // (3)
f.querySelector("#questions").onkeypress = show; // (4)
this.parentElement.parentElement.querySelector("#questionparts"+ n + " > .questionshowp").style ="display:block;"; // (5)
this.onkeypress = undefined; // (6)
master.insertBefore(f,master.children[master.children.length-1]) // (7)
}
form.querySelector("#questions").onkeypress = show; // (8)
form = form.cloneNode(true); // (9)
id 这样你当前的scripts.js是不必要的，.clear必须看起来像这样才能正确格式化
.aquestionpart从<div class="aquestionpart">
<div class="questionparts" id="questionparts1">...</div>
<div class="clear"></div>
</div>
开始，请务必从.questionparts移除onkeypress="show();"。它看起来应该是这样的。
input最后一个有趣的说明是，我提供的两个脚本可以一起使用！ （稍作修改）
<input name="questions" id="questions" class="form-control" placeholder="Questions" value="" type="text">
如果你把它放在你的scripts.js文件中并把它放在//Author: Shane Mendez
var fieldgroup = document.querySelector(".questionshowp .form-group").cloneNode(true);
var addinput = function(){
var parent = this.parentNode.parentNode.parentNode;
var n = parent.querySelectorAll(".form-control").length
var f = fieldgroup.cloneNode(true);
f.children[0].id = "question"+n
f.querySelector(".secondsec").querySelector("button.btn-success").onclick = addinput
console.log(parent)
parent.insertBefore(f,parent.children[parent.children.length-1]);
}
master = document.querySelector(".aquestionpart");
form = document.querySelector(".questionparts");
function show(){
var f = form.cloneNode(true);
var n = master.querySelectorAll(".questionparts").length;
f.id = "questionparts"+(n+1);
f.querySelector("#questions").onkeypress = show;
console.log(this)
this.parentElement.parentElement.querySelector("#questionparts"+ n + " > .questionshowp").style ="display:block;";
this.onkeypress = undefined;
master.insertBefore(f,master.children[master.children.length-1])
$(f.querySelectorAll("button.btn-sm.btn-success")).on("click", addinput)
}
form.querySelector("#questions").onkeypress = show;
form = form.cloneNode(true);
$("button.btn-sm.btn-success").on("click", addinput)
标签的底部，那么剩下的就是body按钮。
答案 1 :(得分：0)
您可以使用此Press在jQuery中动态添加div中的多个输入字段。在这里，您只需要像下面这样调用带有两个参数"2019-12-04 20:36:00 GMT"和HTMLElement的函数：
config在配置中，您可以从config中添加一些输入，例如：
$(".addInput").click(function() {
build_inputs($(this), config);
});