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

Input box value vanishes when adding a new one

本文关键字：输入 消失 新输入 添加      更新时间：2023-09-26

我正在一个web应用程序上工作，我需要一个接一个地添加一些输入框，以便从用户获得命令。我使用JavaScript将它们添加到一个div中，每个div都有一个惟一的ID。我遇到的问题是，一旦我按下enter键，调用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>

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

加法赋值操作符将右边的值与左边的值相加，然后将结果赋值给左边。

一个简单的例子:

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>

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>

如上所述，由于"innerHTML"的内部工作，您的其他值消失了。实际上，当你做字符串的时候。innerHTML +=字符串，它将取代它的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>

相关文章：