使用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"";
}