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

Question

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

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

Answer 1

我有一个 id 为 #infoartist 的文本区域，如下所示：

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

在 JavaScript 代码中，我将获取文本区域的值，并用 替换转义新行 (\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 2

对于浏览器来说，新行只是空白，不会被视为与普通空格（“”）有任何不同。 要获取新行，您必须插入
元素。

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

Answer 3

如果您只需要将文本区域的值发送到服务器并换行，请使用 nl2br 。

Answer 4

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

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

<s:property value="%{text}"/>

，因此输出如您所愿。

对于其他属性，您可以按如下方式使用它。

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

Answer 5

问题来自于换行符 (\n\r?) 与 HTML
标记不同：

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

因为许多注释和我自己的经验告诉我，这个
解决方案没有按预期工作，下面是如何使用 '\ 将新行附加到 textarea 的示例r\n':

function log(text) {
    var txtArea;

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

Answer 6

如果您使用通用 JavaScript 并且需要将字符串分配给文本区域值，那么
document.getElementById("textareaid").value='texthere\\ntexttext'。

您需要替换 \n 或 < br > 与 \\\n。

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

Answer 7

您需要在 textarea 内使用 \n 作为 linebreaks

Answer 8

我遇到了从服务器变量传递到 JavaScript 变量的换行符问题，然后 JavaScript 将它们写入文本区域（使用 KnockoutJS 值绑定）。

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

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

在服务器端，因为只有单个转义字符，JavaScript 无法解析。

Answer 9

如果您想在自己的页面内显示文本，可以使用

 标记。

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>