多个动态输入文本javascript答案

【问题标题】：Multiple dynamic input text javascript多个动态输入文本javascript
【发布时间】：2012-12-17 20:50:53
【问题描述】：

我无法使用 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 来识别每个输入文本框。

干杯。

【问题讨论】：

你说的完成是什么意思？只要它有一个字符？
你应该首先确定你想要达到的目标。据我了解，您想从input-textbox 开始并创建另一个，一旦用户在其中输入内容后单击它。这真是奇怪的行为，你为什么要那样做？是的：当然，您需要id。
@nozzleman，是的，这就是我想要实现的。为什么你说这很奇怪？
@nozzleman，这将是用户使用输入文本框选择的数字范围

标签： javascript

【解决方案1】：

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>

【讨论】：

我很抱歉，但我现在只是在测试这个。它可以工作，但每次我填写输入框时，萤火虫都会报告错误：Error: Permission denied to access property 'toString' 和 NS_ERROR_INVALID_POINTER: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.removeChild]

【解决方案2】：

HTML 代码：

<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/

【讨论】：

:) 它真的很接近我正在寻找的。谢谢。只有一个问题，如果用户清除了输入，我应该改变什么来“删除”输入？
这会让整个事情变得更加复杂。我建议留下额外的框，而忽略服务器端的空输入。

【解决方案3】：

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

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

在您的 addInput() 函数中，您应该检查前一个文本字段的输入是否为 != ""。

【讨论】：