在<textarea>中设置文本，包括换行符
[英]Set text in <textarea>, including newlines
问题描述
我想从js-function设置<textarea>中的<textarea> ; 我只是将innerText -attribute设置为一个新值。 文本是多行的，应该这样显示。 但是，浏览器会删除换行符，整个文本显示为一行：
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>
在<textarea>设置文本时，有没有办法保留换行符？
5 个解决方案
解决方案1
3 已采纳 2018-08-11 11:49:50
试试吧。 我使用属性“value”或“innerHTML”或“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>
解决方案2
1 2018-08-11 11:44:55
您可以设置textarea的value ，这适用于\\n和
`foo\
bar`;
document.querySelector("#my_textarea").value = "foo\\nbar"
<textarea id="my_textarea"></textarea>
如果这对您不起作用，请使用innerHTML属性，方法如下：
document.querySelector("#my_textarea").innerHTML = "foo\\nbar"
<textarea id="my_textarea"></textarea>
解决方案3
0 2018-08-11 11:49:28
使用area.innerHTML代替，innerText属性剥离新行字符
var area = document.getElementById("my_textarea"); area.innerHTML = "foo\\nbar";
<textarea id="my_textarea"> </textarea>
解决方案4
0 2018-08-11 12:03:21
您可以使用\\r或\\n来实现此目的。 此外，HTML还支持\\t在两个单词之间应用选项卡。
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>
解决方案5
0 2018-08-11 13:07:25
根据HTML规范 ：
element . innerText [ = value ]返回元素的文本内容“as rendered”。
可以设置，用给定值替换元素的子元素，但将换行符转换为
br元素。
意思是，你所拥有的应该是有效的。 正如其他答案所述，您可以使用textContent ， value ， innerHTML所有这些都更有可能发挥作用。
如果你开始使用textContent ，你有几个选项/特性，我将在下面列出：
使用像Babel.js这样的ES6转换器
您可以在Stack Overflow的代码段编辑器中启用ES6进行测试。请参阅下面的代码段中的（3）选项
注意：这些似乎适用于OSX Safari，但不适用于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>
Chrome最近中断了在使用innerText设置的textarea中复制换行符的操作
[英]Chrome recently broke copying newlines in textarea set with innerText
Django/CKEditor/Javascript 问题，包括 textarea 中的文本
[英]Django/CKEditor/Javascript Issue including text in textarea
当 MySQL 的值包含换行符时，使用 jQuery 如何设置文本区域的内容
[英]Using jQuery how can I set the contents of a textarea when the value from MySQL contains newlines
将textarea中的文本按新行（包括空行）拆分为javascript数组
[英]Splitting text in textarea by new lines (including empty lines) into javascript array
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.