添加新的输入框值会消失

我正在开发一个Web应用程序，我需要一个接一个地添加多个输入框以获取用户的命令。我使用JavaScript将它们添加到每个具有唯一ID的div。我遇到的问题是，一旦我按下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>

来源

2015-07-10 Dendory

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

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>

来源

2015-07-10 18:07:38

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

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

来源

2015-07-10 17:56:56

那么我使用'+ ='，所以它不会覆盖以前的东西。虽然也许用'insertNode'它不会发生，但它并没有真正告诉我为什么会发生这种情况...... – Dendory

@Dendory实际上你会覆盖以前的东西。看到我的答案为什么发生这种情况。 –

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

 \t \t \t 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) 
 
{ 
 
\t add_input(); 
 
} 
 
}

<html> 
 
    \t <head> 
 
    \t \t <script> 
 

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

来源

2015-07-10 17:59:38

我这样做了几个问题。首先，'press_key'不再工作。它说't是未定义的。我如何让'press_key'的文本起作用？其次，我需要在输入框前面添加一个“p”标签的输入框。我尝试添加另一个'p'元素，在其中添加一些'innerHTML ='>''，然后将输入框添加到它，但'>'没有显示出来。 – Dendory

't'参数不再使用。使用'this'来代替。至于其他问题，我认为您可能需要查看[创建元素的文档]（https://developer.mozilla.org/en-US/docs/Web/API/Document/的createElement）。从本质上讲，您需要使用'createElement'语法创建其他元素，'appendChild'将'input' *创建到新创建的'p'元素上。 –

如上所述，你的其他值消失，因 “的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>

希望这有助于。

来源

2015-07-10 18:19:13 milenvoutchev

正如我在其他答案中提到的那样，每当我需要使用't'做一些事情时，这会打破'press_key'，并且由于添加输入框显然不是应用程序所做的所有事情，因此需要进行重大改写。相反，我选择保存当前值，然后在追加下一个输入框之前恢复该值。 – Dendory

添加新的输入框值会消失

回答

相关问题