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>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>?
- 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
5 Answers
Reset to default 7Try 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
brelements.
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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743781800a4505937.html
评论列表（0条）