javascript - 通过输入数字生成动态输入文本字段

Question

JsBin

我正在尝试使用按钮单击添加动态输入文本字段。效果很好。但是，我想通过输入数字来添加文本字段。例如，如果用户在输入文本字段中输入数字 (7)，我需要生成 7 个输入文本字段。我该如何完成这段代码？

Javascript

function add_f()
{
    var valu = document.getElementById("values").value;
    alert(valu);
    /* var extra_fields = document.getElementById("add");
    extra_fields.innerHTML += "<br><input type='text' />" */
}

HTML

<input  name="values" id="values" maxlength="2" type="text" /><br>
<input type="button" value="Add more fields" onclick="add_f();" />
<div id="add">
    <input type="text"/>
</div>

Answer 1

您可以通过将文本框创建代码包装在循环内来完成此操作。理想情况下，您应该进行一些检查以确保输入的数字有效或其他，但这应该可以帮助您开始。

function add_f()
{
    var valu = document.getElementById("values").value;
    var extra_fields = document.getElementById("add");

    extra_fields.innerHTML = ""; //clear any existing inputs
    for (var i = 0; i < valu; i++) { //add new inputs until you reach 'valu'
        extra_fields.innerHTML += "<br><input type='text' />";
    }
}

http://jsbin.com/voyulogi/2