CODEWITHSUNDEEP
javascripthtml
user2722968
user2722968

Reputation: 16475

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>

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

Upvotes: 5

Views: 3539

Answers (5)

vol7ron
vol7ron

Reputation: 42095

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:

  1. Use an ES6 transpiler such as Babel.js
    You can test by enabling ES6 in Stack Overflow's snippet editor.

  2. 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>

Upvotes: 0

saAction
saAction

Reputation: 2065

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>

Upvotes: 0

Ly Thanh Ngo
Ly Thanh Ngo

Reputation: 466

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>

Upvotes: 7

Great-Josh
Great-Josh

Reputation: 1

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>

Upvotes: 0

Luca Kiebel
Luca Kiebel

Reputation: 10096

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>

Upvotes: 2

Related Questions