Question

我正在尝试使用按钮单击添加动态输入文本字段。它工作正常。但是，我想通过输入数字来添加文本字段。例如，如果用户在输入文本字段中输入数字（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 container =document.getElementById("add");
  var value = document.getElementById("values").value;
  for(var i=0;i<value;i++)
   {
     var input = document.createElement('input');
     input.type='text'
     container.appendChild(input)
   }
}

JSFiddle

Answer 2

您可以通过将文本框创建代码包装在循环中来完成此操作。理想情况下，你会做一些检查，以确保输入的数字是有效的，但这应该让你开始。

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

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

2 个答案: