添加新的輸入框值會消失

我正在開發一個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

添加新的輸入框值會消失

回答

相關問題