如何向 HTML 文本区域添加换行符？

Question

我正在用 JavaScript 编辑<textarea> 。 问题是当我在其中换行时，它们不会显示。 我怎样才能做到这一点？

我正在获取编写函数的值，但它不会换行。

Answer 1

问题来自这样一个事实，即换行符 ( \\n\\r ?) 与 HTML <br/>标签不同

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

更新

由于许多评论和我自己的经验告诉我，这个<br>解决方案没有按预期工作，这里是一个示例，说明如何使用 '\\r\\n' 将新行附加到textarea

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

我决定对此进行编辑，而不是作为一个新问题，因为这是一个太受欢迎的答案，不可能是错误或不完整的。

Answer 2

如果您使用通用的 java 脚本并且您需要将字符串分配给文本区域值，那么

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

您需要将\\n或< br >替换为\\\\\\n

否则它会在所有浏览器上给出Uncaught SyntaxError: Unexpected token ILLEGAL 。

Answer 3

也许有人觉得这很有用：

我遇到了从服务器变量传递到 javascript 变量的换行符问题，然后 javascript 将它们写入 textarea（使用knockout.js 值绑定）。

解决方案是双重转义新行：

orginal.Replace("\r\n", "\\r\\n")

在服务器端，因为只有单个转义字符 javascript 没有解析。

Answer 4

你需要使用\\n为linebreaks内textarea

Answer 5

如果要在自己的页面中显示文本，可以使用<pre>标签。

 document.querySelector('textarea').addEventListener('keyup', function() { document.querySelector('pre').innerText = this.value; });

 <textarea placeholder="type text here"></textarea> <pre style="font-family: inherits"> The new lines will be respected and spaces too </pre>

Answer 6

我有一个 ID 为#infoartist的文本区域，请关注：

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

在 javascript 代码中，我将获取 textarea 的值并用<br />标记替换转义的新行（\\n\\r），例如：

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

所以如果你使用 jquery（像我一样）：

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

希望对你有帮助。 :-)

Answer 7

新行只是浏览器的空白，不会被视为与普通空格 (" ") 有任何不同。 要获得新行，您必须插入<BR />元素。

解决该问题的另一种尝试：将文本输入到 textarea 中，然后在按钮后面添加一些 JavaScript 以将不可见字符转换为可读的内容并将结果转储到DIV 。 这会告诉你你的浏览器想要什么。

Answer 8

如果您只需要使用换行符将testarea的值发送到服务器，请使用nl2br

Answer 9

这是我为我遇到的同样麻烦所做的事情。

当我在 jsp 中将文本传递到下一页时，我将其作为 textarea 阅读，而不是阅读类似的内容

所以输出如你所愿。 对于其他属性，您可以使用如下。

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>