javascript - Set text in <textarea>, including newlines

I want to set the text in a <textarea> from a js-function; I'm simply setting the innerText-attribute to a new value. The text is multiline and should be displayed as such. However, newlines are dropped by the browser and the entire text is displayed as one line:

document.getElementById("my_textarea1").innerText = "foo\nbar"; // displayed as "foobar"

document.getElementById("my_textarea2").innerText = "foo\
    bar"; // displayed as "foobar"

document.getElementById("my_textarea3").innerText = `foo\
    bar`; // again, "foobar"

<textarea id="my_textarea1"></textarea>
<textarea id="my_textarea2"></textarea>
<textarea id="my_textarea3"></textarea>

document.getElementById("my_textarea1").innerText = "foo\nbar"; // displayed as "foobar"

document.getElementById("my_textarea2").innerText = "foo\
    bar"; // displayed as "foobar"

document.getElementById("my_textarea3").innerText = `foo\
    bar`; // again, "foobar"

<textarea id="my_textarea1"></textarea>
<textarea id="my_textarea2"></textarea>
<textarea id="my_textarea3"></textarea>

Is there a way to preserve newlines when setting the text in a <textarea>?

Share Improve this question edited Aug 11, 2018 at 12:10 vol7ron 42.2k22 gold badges125 silver badges175 bronze badges asked Aug 11, 2018 at 11:39 user2722968 16.6k3 gold badges55 silver badges75 bronze badges

The point is that the newlines are ing from js-code, not the HTML itself. – user2722968 Commented Aug 11, 2018 at 11:45
I don't know why it is not working at your side but it is perfectly fine here: jsfiddle/jt42sL8e/5 – Johar Zaman Commented Aug 11, 2018 at 11:57

Add a ment |

5 Answers 5

Sorted by: Reset to default 7

Try it. I use property "value" or "innerHTML" or "textContent":

var area = document.getElementById("my_textarea");
area.value = "foo\nbar";

var area_2 = document.getElementById("my_textarea_2");
area_2.innerHTML = "foo\nbar";

var area_3 = document.getElementById("my_textarea_3");
area_3.textContent = "foo\nbar";

<textarea id="my_textarea"></textarea>
<textarea id="my_textarea_2"></textarea>
<textarea id="my_textarea_3"></textarea>

You can set the value of the textarea, this works with \n, and

`foo\
bar`;

document.querySelector("#my_textarea").value = "foo\nbar"

<textarea id="my_textarea"></textarea>

If that doesn't work for you, use the innerHTML property, the same way:

document.querySelector("#my_textarea").innerHTML = "foo\nbar"

<textarea id="my_textarea"></textarea>

Use area.innerHTML instead, innerText property strips off the new line character

var area = document.getElementById("my_textarea");
area.innerHTML = "foo\nbar";

<textarea id="my_textarea">

</textarea>

You can use \r or \n for this. Additionally HTML also supports \t to apply tab between two words.

document.querySelector("#my_textarea1").value = "foo\rbar"

document.querySelector("#my_textarea2").value = "foo\nbar"

document.querySelector("#my_textarea3").value = "foo\tbar"

<!DOCTYPE html>
<html>
<body>

<p>New line using "\r" :</p>
<textarea id="my_textarea1"></textarea>
<br>
<p>New line using "\n" :</p>
<textarea id="my_textarea2"></textarea>
<br>
<p>Tab between tow words using "\t" :</p>
<textarea id="my_textarea3"></textarea>


</body>
</html>

According to the HTML Spec:

element . innerText [ = value ]

Returns the element's text content "as rendered".

Can be set, to replace the element's children with the given value, but with line breaks converted to br elements.

Meaning, what you have should have worked. As noted by other answers you could use textContent, value, innerHTML all of which are more likely to work.

If you are set on using textContent, you have a few options/peculiarities, which I'll list out below:

Use an ES6 transpiler such as Babel.js
You can test by enabling ES6 in Stack Overflow's snippet editor.
Refer to (3) options in the snippet below
Note: these seem to work in OSX Safari but not Google Chrome

// Call toString() method
document.getElementById('my_textarea').innerText = "foo\nbar".toString();

// Include the line return character
document.getElementById('my_textarea2').innerText = "foo\r\nbar";

// Apparently, any whitespace or escape character will work
document.getElementById('my_textarea3').innerText = "foo \nbar";

<textarea id="my_textarea"></textarea>
<textarea id="my_textarea2"></textarea>
<textarea id="my_textarea3"></textarea>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Set text in <textarea>, including newlines - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)