Question

我正在开发一个网络应用程序，我需要一个接一个地添加一些输入框，以便从用户那里获取命令。我使用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();
  }
}

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

Answer 1

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

Answer 2

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

＆＃13;

    			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();
}
}

＆＃13;

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

＆＃13;

Answer 3

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();
  }
}

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

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

希望这有帮助。

添加新的输入框值会消失

4 个答案: