Javascript 添加新输入框时，输入框值消失

我正在开发一个web应用程序，我需要一个接一个地添加多个输入框，以便从用户那里获取命令。我使用JavaScript将它们添加到一个div中，每个div都有一个唯一的ID。我遇到的问题是，一旦我按下enter键并调用JavaScript函数来添加下一个，上一个输入框就会清空，我不知道为什么

以下是示例代码：

var i=0；
添加_输入（）；
函数add_input（）{
i++；
document.getElementById（'main'）.innerHTML+=“”；
document.getElementById（'input'+i）.focus（）；
}
功能按键（e，t）{
如果（e.keyCode==13）{
添加_输入（）；
}
}

---

innerHTML将覆盖所有现有内容，并用新内容替换它们。您应该创建一个新的输入元素并使用它。

innerHTML

覆盖所选元素中的所有html，包括对给定html执行的任何用户/javascript操作。因此，您的输入值将被新的html删除。您需要创建一个元素，然后使用

appendChild

。这将保持当前html元素的状态

var i=0；
函数add_input（）
{
i++；
var input=document.createElement（'input'）；
input.onkeypress=按\键；
input.id='input'+i；
document.body.appendChild（输入）；
input.focus（）；
}
功能按键（e）
{
//`参数不再使用。请改用'this'。
如果（e.keyCode==13）
{
添加_输入（）；
}
}

将右侧值添加到左侧值，然后将结果值分配到左侧

举个简单的例子：

x += y;
// is equivalent to
x = x + y;

在您的代码中，您基本上是采用现有的HTML，添加一个新的HTML块，然后将新的HTML分配给替换现有HTML的原始元素。由于该值不是在HTML中设置的，而是存储在DOM中，因此在您将新HTML分配给元素时（即浏览器将其呈现给替换先前DOM的DOM时），该值就会丢失

您可以如上所述使用

insertNode

，或者设置HTML属性以首先存储值，如下例所示。但是请注意，此解决方案纯粹是为了说明值消失的原因。这样做有一个问题，即如果以前的任何输入值被更改，则只会保留这些输入的原始值

var i=0；
添加_输入（）；
函数add_input（）{
var curInput=document.getElementById（'input'+i）；
如果（输入）{
curInput.setAttribute（'value'，curInput.value）；
}
++一,；
document.getElementById（'main'）.innerHTML+=“”；
document.getElementById（'input'+i）.focus（）；
}
功能按键（e，t）{
如果（e.keyCode==13）{
添加_输入（）；
}
}

---

如上所述，由于“innerHTML”的内部工作，您的其他值将消失。事实上，当您执行string.innerHTML+=string时，它将替换它的HTML（这意味着以前的内容已经完全消失，事实上被新的HTML替换）

您想要使用的可能是appendChild（）

通过少量重写，我成功地使您的代码正常工作：

var i=0；
函数add_input（）{
i++；
var main=document.getElementById（'main'），
p=document.createElement（“p”），
arrow=document.createTextNode（'>'），
el=document.createElement（“输入”）；
el.type=“文本”；
el.style=“宽度：90%”；
el.id=“输入”+i；
el.addEventListener（“按键”，按U键）；
主诉儿童（p）；
main.appendChild（箭头）；
主、辅项（el）；
el.focus（）；
}
功能按键（e，t）{
如果（e.keyCode==13）{
添加_输入（）；
}
}

这并不能回答您的问题，但如果您的任务允许使用框架/库，我强烈建议您使用KnockoutJS。他们的教程涵盖了这个问题。我使用了

+=

，所以它不会覆盖前面的内容。虽然使用

insertNode

可能不会发生这种情况，但它并不能真正告诉我为什么会发生这种情况…@Dendory您实际上是在覆盖前面的内容。请看我的答案，了解为什么会发生这种情况。这样做有几个问题。首先，

按键

不再起作用。它说，

t是未定义的

。如何获取

按键的文本才能工作？其次，我需要在
p
标记中添加输入框，该标记前面有一些文本。我尝试添加另一个
p
元素，在其中添加一些
innerHTML='
，然后向其中添加输入框，但是
没有显示。
t
参数不再使用。改用
此
。至于你剩下的问题，我想你可能需要看一下。基本上，您需要使用
createElement
语法创建其他元素，并将
appendChild
您的
input
添加到新创建的
p
元素上。这实际上在示例页面中起作用，但在我的应用程序中不起作用，因为需要进行更多的处理和更多的页面修改。我通过将
t.value
保存在
press_key
中，并将其用于
setAttribute
。正如我在另一个答案中提到的，每当我需要对
t
执行某些操作时，这会中断
press_key
，并且需要进行重大重写，因为添加输入框显然不是应用程序的全部功能。相反，我选择保存当前值，然后在附加下一个输入框之前恢复该值。