Question

我正在尝试在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">

Answer 1

有很多实现此目标的可能性。我猜您到目前为止还没有使用任何框架或库。因此，很简单的变体可能如下：

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>

Answer 2

以下是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 个答案: