javascript - 使用另一个输入动态添加和删除输入

Question

我为此搜索了很多，但只能找到 +1 -1 的解决方案。但是我想用这样的其他输入来设置输入的数量:

//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">

//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">

当用户现在在第一个字段中写入 5 时，表单应如下所示:

//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">

//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">
<input type="text" size="30" maxlength="30" id="input_2" name="input_2">
<input type="text" size="30" maxlength="30" id="input_3" name="input_3">
<input type="text" size="30" maxlength="30" id="input_4" name="input_4">
<input type="text" size="30" maxlength="30" id="input_5" name="input_5">

我该怎么做？我必须使用 js 吗？

Answer 1

这是一个不使用任何框架的简单 javascript 片段:

function addInputs() {
    var count = parseInt(document.getElementById("count").value);
    for (var i = 2; i <= count; i++) {
        document.getElementById('moreinputs').innerHTML += '<input type="text" name="input_' + i + '" id="input_' + i + '" />';
    }
}

在此示例中，您必须添加一个 ID 为“moreinputs”的容器 (div)。但是，当多次调用此函数时，将无法正常工作(例如，它只能增加输入的数量而不能减少)