添加新的输入框值消失答案

【问题标题】：Input box value vanishes when adding a new one添加新的输入框值消失
【发布时间】：2015-07-10 17:49:59
【问题描述】：

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

这里是示例代码：

var i = 0;
add_input();

function add_input() {
  i++;
  document.getElementById('main').innerHTML += "<p>&gt; <input type='text' style='width:90%' id='input" + i + "' onkeypress='press_key(event, this)'></p>";
  document.getElementById('input' + i).focus();
}

function press_key(e, t) {
  if (e.keyCode == 13) {
    add_input();
  }
}

&lt;div id='main'&gt;&lt;/div&gt;

【问题讨论】：

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

标签： javascript function input

【解决方案1】：

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

【讨论】：

好吧，我使用+=，所以它不会覆盖以前的东西。虽然insertNode 可能不会发生，但它并没有真正告诉我为什么会发生......
@Dendory 实际上，您正在覆盖以前的内容。请参阅我的回答，了解为什么会发生这种情况。

【解决方案2】：

addition assignment operator 会将右侧值添加到左侧值，然后将结果值分配给左侧。

举个简单的例子：

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

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

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

var i = 0;
add_input();

function add_input() {
  var curInput = document.getElementById('input' + i);
  if (curInput) {
    curInput.setAttribute('value', curInput.value);
  }

  ++i;
  document.getElementById('main').innerHTML += "<p>&gt; <input type='text' style='width:90%' id='input" + i + "' onkeypress='press_key(event, this)'></p>";
  document.getElementById('input' + i).focus();
}

function press_key(e, t) {
  if (e.keyCode == 13) {
    add_input();
  }
}

&lt;div id='main'&gt;&lt;/div&gt;

【讨论】：

这实际上在示例页面中起作用，但在我的应用程序中不起作用，因为完成了更多的处理和更多的页面修改。我通过在press_key 中保存t.value 并将其用于setAttribute 来解决它。

【解决方案3】：

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

    			var i = 0;
function add_input()
{
i++;
    var input = document.createElement('input');
    input.onkeypress=press_key;
    input.id = 'input' + i;
    document.body.appendChild(input);
    
input.focus();
}
function press_key(e)
{
//`t` argument is no longer used. Use `this` instead.
if (e.keyCode == 13)
{
	add_input();
}
}

    <html>
    	<head>
    		<script>

    		</script>
    	</head>
    	<body onload='add_input()'>
    		<div id='main'>
    		</div>
    	</body>
    </html>

【讨论】：

我在这样做时遇到了几个问题。首先，press_key 不再起作用。它说t is undefined。如何让press_key 的文本起作用？其次，我需要在 p 标签内添加输入框，该标签在输入前有一些文本。我尝试添加另一个p 元素，在其中添加一些innerHTML = '&gt; '，然后将输入框添加到其中，但> 没有出现..
t 参数不再使用。请改用this。至于您的其他问题，我认为您可能需要查看documentation for creating elements。本质上，您需要使用createElement 语法和appendChild 您的input onto 新创建的p 元素创建其他元素。

【解决方案4】：

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

你想要使用的可能是 appendChild()。

几乎没有重写，我已经设法使您的代码工作：

http://jsfiddle.net/gs1s0fsx/

 var i = 0;

 function add_input() {
     i++;

     var main = document.getElementById('main'),
         p = document.createElement("p"),
         arrow = document.createTextNode('>'),
         el = document.createElement('input');
     el.type = "text";
     el.style = "width:90%";
     el.id = "input" + i;
     el.addEventListener("keypress", press_key);
     main.appendChild(p);
     main.appendChild(arrow);
     main.appendChild(el);
     el.focus();
 }

 function press_key(e, t) {
     if (e.keyCode == 13) {
         add_input();
     }
 }

<a href="javascript: add_input()">add</a>

<div id='main'></div>

希望这会有所帮助。

【讨论】：

正如我在另一个答案中提到的，每当我需要对t 做某事时，这会破坏press_key，并且需要进行重大重写，因为添加输入框显然不是应用程序的全部功能.相反，我选择保存当前值，然后在添加下一个输入框之前恢复该值。