Добавлять элементы в текстовое поле в новой строке, используя HTML DOM

Question

Предположим, у меня есть текстовое поле: -

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

И я пытаюсь добавить текст в это поле ввода следующим образом: -

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

Вывод выглядит примерно так: -

AAAA....

Каждый раз, когда текст добавляется в одной строке, как можно заставить текст каждый раз добавляться к новой строке?Как показано ниже.

A
A
A
.
.

Answer 1

Как сказал @GuyFromChennai, вы должны использовать тег вместо того, чтобы писать '\ n', что приведет к разрыву строки, я попробовал это:

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

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

Answer 2

Я сделал вам пример, который добавляет новый символ «А» каждые 5 секунд.Я использую textarea вместо input tag.

setInterval(appendNewChar, 5000)

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

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

Answer 3

Вместо ввода текста типа вы можете использовать текстовую область, а затем оформить ее так, чтобы она выглядела как текстовое поле.

<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 4

input используется для одной строки.Попробуйте использовать textarea.

См. Код ниже:

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

и js будет выглядеть так:

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

Answer 5

Введенное текстовое поле будет поддерживать одну строку.не несколько строк.это его поведение.Вот почему ваш текст отображается в одну строку.

Если вам нужно несколько строк, то вам нужно использовать <textarea></textarea> element