Question

我无法使用javascript创建多个输入文本。

我的观点是每次完成输入之前创建一个新的输入文本。（母体？）

我有一些组合框的代码，但这次我只需要输入文本框。

我该怎么做？

我找到了这段代码：

<script type="text/javascript">
function addInput()
{
    var x = document.getElementById("inputs");
    x.innerHTML += "<input type=\"text\" />";
}
</script>

<input type="button" onmousedown="addInput();" />
<div id="inputs"></div>

但是我的问题按钮已经过时了。

我认为我的事件触发器将是这样的“当用户在输入文本框中单击时它是！=空白它会创建一个新的”。

我需要一些ID来识别每个输入文本框。

干杯。

Answer 1

HTML code：

<div id="inputcontainer">
    <input type="text" name="input0" id="input0" onkeyup="addInput();" />
</div>

和Javascript：

var currentindex = 0;
function addInput(){
    var lastinput = document.getElementById('input'+currentindex);
   if(lastinput.value != ''){
        var container = document.getElementById('inputcontainer');
        var newinput = document.createElement('input');
        currentindex++;
        newinput.type = "text";
        newinput.name = 'input'+currentindex;
        newinput.id = 'input'+currentindex;
        newinput.onkeyup = addInput;
        container.appendChild(newinput);
   }
}

仅当最后一个输入不为空时，才会向列表添加新输入。

http://jsfiddle.net/HJbgS/

Answer 2

<强> JSBIn Demo

猜猜这有帮助：

   <div id="myDiv">
        <input type="text" id="txt_1" onkeydown="newTextBox(this)" />
   </div>

<script type="text/javascript">

function newTextBox(element){
   if(!element.value){
       element.parentNode.removeChild( element.nextElementSibling);
       return;
   }
   else if(element.nextElementSibling)
       return;
    var newTxt = element.cloneNode();
    newTxt.id = 'txt_'+( parseInt( element.id.substring(element.id.indexOf('_')+1)) + 1);
    newTxt.value='';
    element.parentNode.appendChild(newTxt);
}  

</script>

Answer 3

查看文本输入字段中的onchange事件。您可以使用它，就像在按钮上使用onmousedown一样。

有关示例，请参阅http://www.w3schools.com/jsref/event_onchange.asp。

在addInput()函数中，您应检查上一个文本字段的输入是否为！=“”。

多个动态输入文本javascript

3 个答案: