获取输入数值并循环显示文本字段[关闭]答案

【问题标题】：Get input number value and loop to display text field [closed]获取输入数值并循环显示文本字段[关闭]
【发布时间】：2019-02-12 08:16:26
【问题描述】：

我正在尝试在 HTML/PHP 页面上创建一个表单，该表单在输入类型数字字段中获取给定值，并根据前一个数字字段的值在同一页面中动态显示新的输入类型文本字段.

所以在我的表格中我有这个：

<label for="number">Number of servers</label>
<input type="number" id="number" name="number" min="1" max="32" onkeydown="javascript: return event.keyCode == 69 ? false : true" placeholder="2" required tabindex="6">

当用户输入 4 时，我希望下面显示 4 个新的文本字段。所以我希望使用递减的 DO...WHILE 循环，但我不知道如何去做。

检查更改的最佳方法（onchange、onkeyup、onkeydown、...）？
如何正确显示新的输入文本字段（javascript、jquery、...）？

目标是最后有这样的东西：

<input type="text" id="server_name_1" name="server_name_1" maxlength="8" autocomplete="off" required tabindex="7"> 
<input type="text" id="server_name_2" name="server_name_2" maxlength="8" autocomplete="off" required tabindex="8"> 
<input type="text" id="server_name_3" name="server_name_3" maxlength="8" autocomplete="off" required tabindex="9"> 
<input type="text" id="server_name_4" name="server_name_4" maxlength="8" autocomplete="off" required tabindex="10">

【问题讨论】：

显示到目前为止你尝试了什么？
通过获取输入中的值开始，我建议使用 .change 在用户单击箭头之一以及直接更改值时触发事件。
“期望使用 do..whie 循环” - 你的意思是 for 循环？
也不需要“javascript:”标签。
将输入字段命名为server_name_# 是个坏主意。您基本上是将类似数组的数据编写为带有数字尾随值的字符串。这将导致 hacky 代码和 [crnge] 变量变量。您应该将您的 name 属性更改为数组形式...server_name[1] - 然后访问这些值将是绝对的快！

标签： javascript php jquery html loops

【解决方案1】：

这是jQuery的示例

$('#number').on('change keyup',function(){
  let inputs = '';
  let value = parseInt($(this).val());
  for(let i = 0;i<value;i++){
    inputs += `<input autocomlete="off" type="text" id="server_name${i+1}" name="server_name${i+1}" maxlength="8" tabindex="${i+6+1}" required /></br>` 
  }
  $('#container').html(inputs)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="number">Number of servers</label>
<input type="number" id="number" name="number" min="1" max="32" onkeydown="javascript: return event.keyCode == 69 ? false : true" placeholder="2" required tabindex="6">
<div id="container"></div>

【讨论】：

【解决方案2】：

实现这一目标的可能性有很多。我猜你还没有使用任何框架或库。因此，一个非常简单的变体可能如下：

var numberInput = document.getElementById('number');
var serverInputContainer = document.getElementById('container');

numberInput.onchange = function() {
  var inputs = '';
  for(var i = 0; i < parseInt(numberInput.value); ++i) {
    inputs = inputs + '<input type="text" name="server_name_' + i + '"/><br/>';
  }
  serverInputContainer.innerHTML = inputs;
};

<input type="number" id="number"/>
<div id="container"></div>

【讨论】：