如何根据先前的输入类型范围值创建“ x”个输入类型文本？

Question

我想基于用户先前选择的输入范围值来创建一定数量的输入。

这是输入范围：

<div class="line1">

<h4>Quantity</h4>

<input type="range" min="3" max="20" class="form-control" name="qtd" oninput="display.value=value" onchange="display.value=value">

<input type="text" id="display" readonly class="form-control">

</div>

并使用此值，我想创建更多这样的输入对（两个输入对，每个输入对彼此下面）：

<div class="line1-1">

<h4>Tag</h4>
<input type="text" class="form-control" name="etiqueta" placeholder="Etiqueta" autocomplete="off" required>

</div>

<div class="line1-1">

<h4>Num</h4>
 <input type="text" class="form-control" placeholder="Número de Série" autocomplete="off" id="modelo" name="modelo" required>

</div>

Answer 1

您可以在HTML代码中执行类似的操作。

 <div class="line1"> <h4>Quantity</h4> <input type="range" min="3" max="20" class="form-control" name="qtd" oninput="document.getElementById('display').value=this.value" onchange="document.getElementById('display').value=this.value"> <input type="text" id="display" readonly class="form-control"> </div>

Answer 2

这应该使您入门。 我添加了一个div来放置结果控件。我所做的就是将所需的html结果放入模板中，然后每次遍历范围元素返回的次数都一样。

 <!doctype html> <html> <head> </head> <body> <div class="line1"> <h4>Quantity</h4> <input type="range" id="range" min="3" max="20" name="qtd" /> <input type="text" id="display" readonly /> <div id="more"></div> </div> <script> const range = document.querySelector("#range") const display = document.querySelector("#display") const more = document.querySelector("#more") range.addEventListener('change', e => { const val = e.target.value display.value = val createFormElements(Number(val)) }) function createFormElements(num) { let html = '' for (let i = 1; i <= num; i+=1) { html += ` <div class="line1-1"> <h4>Tag</h4> <input type="text" class="form-control" name="etiqueta" placeholder="Etiqueta" autocomplete="off" required> </div> <div class="line1-1"> <h4>Num ${i}</h4> <input type="text" class="form-control" placeholder="Número de Série" autocomplete="off" id="modelo-${i}" name="modelo" required> </div>` } more.innerHTML = html } </script> </body> </html>

Answer 3

我将要复制的两个div分组到一个div中，并将其display属性设置为none 。

<div id="master" style="display:none;">
  <div class="line1-1">
    <h4>Tag</h4>
    <input type="text" class="form-control" name="etiqueta" placeholder="Etiqueta" autocomplete="off" required>
  </div>
  <div class="line1-1">
    <h4>Num</h4>
    <input type="text" class="form-control" placeholder="Número de Série" autocomplete="off" id="modelo" name="modelo" required>
  </div>
</div>

这样，div充当了不可见的模板，您可以简单地使用cloneNode（）方法进行克隆，并将克隆附加到一个空的div容器中。

这是一个例子：

 function process(e) { document.getElementById("display").value = e.target.value; document.getElementById("duplicates").innerHTML = ""; var clone; for (var a = 0; a < parseInt(e.target.value); a++) { clone = document.getElementById("master").cloneNode(true); clone.setAttribute("style", ""); document.getElementById("duplicates").appendChild(clone); } } document.getElementById("qtd").addEventListener("input", process); document.getElementById("qtd").addEventListener("change", process);

 <div class="line1"> <h4>Quantity</h4> <input type="range" min="3" max="20" class="form-control" name="qtd" id="qtd"> <input type="text" id="display" readonly class="form-control"> </div> <div id="master" style="display:none;"> <div class="line1-1"> <h4>Tag</h4> <input type="text" class="form-control" name="etiqueta" placeholder="Etiqueta" autocomplete="off" required> </div> <div class="line1-1"> <h4>Num</h4> <input type="text" class="form-control" placeholder="Número de Série" autocomplete="off" id="modelo" name="modelo" required> </div> </div> <div id="duplicates">

如何根据先前的输入类型范围值创建“ x”个输入类型文本？

问题描述

3 个解决方案

解决方案1
0 2019-07-23 20:05:40

解决方案2
0 2019-07-23 20:16:01

解决方案3
0 已采纳 2019-07-23 20:18:09

如何根据先前的输入类型范围值创建“ x”个输入类型文本？

问题描述

3 个解决方案

解决方案1 0 2019-07-23 20:05:40

解决方案2 0 2019-07-23 20:16:01

解决方案3 0 已采纳 2019-07-23 20:18:09

解决方案1
0 2019-07-23 20:05:40

解决方案2
0 2019-07-23 20:16:01

解决方案3
0 已采纳 2019-07-23 20:18:09