170

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

我得到了编写函数的价值，但它不会换行。

4

9 回答 9

293

问题来自于换行符（\n\r？）与 HTML<br/>标记不同的事实

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

更新

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

function log(text) {
    var txtArea ;

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

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

于 2009-05-14T14:55:09.777 回答
24

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

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

你需要更换\n或< br >\\\n

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

于 2012-01-19T06:30:15.620 回答
19

你需要在\n里面linebreaks使用textarea

于 2009-05-14T14:54:20.857 回答
19

也许有人觉得这很有用：

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

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

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

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

于 2013-05-31T13:59:35.650 回答
7

如果要在自己的页面中显示文本，可以使用<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>

于 2018-06-10T21:09:18.353 回答
4

我有一个 id 为#infoartist的 textarea如下：

<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 />');

希望对您有所帮助。:-)

于 2015-03-30T19:50:45.823 回答
2

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

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

于 2009-05-14T14:54:28.313 回答
0

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

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

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

<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>
于 2014-10-23T22:29:25.953 回答
0

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

于 2013-03-05T13:17:25.580 回答