使用HTML DOM在新行中將元素追加到文本框中

Question

假設我有文本框：-

<input type="text" name="content"  id="content"/>

我正在嘗試以以下方式將文本追加到此輸入框：

document.getElementById("content").value+= "A";

輸出類似於：

AAAA....

每次文本都添加到同一行中，如何使文本每次都添加到新行中？ 像下面這樣。

A
A
A
.
.

Answer 1

您可以使用文本區域，然后設置其樣式以使其看起來像文本框，而不是輸入類型的文本。

<textarea name="textarea_content" id="tx_content"></textarea>

document.getElementById("tx_content").value+= "A\n";
document.getElementById("tx_content").value+= "A\n";

JSFiddle： https ：//jsfiddle.net/sx7t3ykc/

Answer 2

輸入文本框將支持一行。 沒有多行。 那就是行為。 這就是為什么您的文本顯示在一行中的原因。

如果需要多行，則需要使用<textarea></textarea>元素

Answer 3

input用於單行。 嘗試使用textarea 。

參考下面的代碼：

<textarea type="text" name="content"  id="content">
</textarea>

和js將是這樣的：

document.getElementById("content").value+= "A\n";

Answer 4

我為您提供了一個示例，該示例每5秒追加一個新的“ A”字符。 我使用textarea代替了輸入標簽。

 setInterval(appendNewChar, 5000) function appendNewChar() { document.getElementById("myTextArea").value += "A\\n"; } 

 <textarea id="myTextArea"></textarea> 

Answer 5

正如@GuyFromChennai所說，您必須使用標記而不是，而且，寫'\\ n'將使換行符中斷，我嘗試這樣做：

<textarea name="content"  id="content"></textarea>

for (let i=0; i<3; i++){
   document.getElementById("content").value+= "A\n"";
}