如何在 textarea 元素中添加新行？答案

【问题标题】：How to add a new line in textarea element?如何在 textarea 元素中添加新行？
【发布时间】：2012-01-27 12:18:28
【问题描述】：

我想在文本区域中添加换行符。我尝试使用\n 和<br/> 标签但没有工作。您可以看到上面的 HTML 代码。你能帮我在 textarea 中插入换行符吗？

<textarea cols='60' rows='8'>This is my statement one.\n This is my statement2</textarea>

<textarea cols='60' rows='8'>This is my statement one.<br/> This is my statement2</textarea>

【问题讨论】：

标签： html textarea line-breaks

【解决方案1】：

试试这个：

    &lt;textarea cols='60' rows='8'&gt;This is my statement one.&amp;#13;&amp;#10;This is my statement2&lt;/textarea&gt;

&#10;换行和&#13;回车是HTML entities^wikipedia。这样，您实际上是在解析新行 ("\n")，而不是将其显示为文本。

【讨论】：

@LittleAlien jsfiddle.net/v0y3xvpx/1 - 根据 OP 问题回答，显然问题已解决
不仅仅是&#10; 足以解析\n？
是否需要换行符和回车符，甚至是否解析正确，这不取决于 Windows 还是 macOS？
@SeizeTheDay 是的，但它不是 MacOS - 它是 Linux/BSD 与 Windows
@Bakudan 哦！我认为基于 Unix 的 macOS 仍然存在这个问题。但你肯定是对的，区别更普遍。

【解决方案2】：

使用 CSS 在 Textarea 中输入关键字行：

white-space: pre-wrap;

【讨论】：

这个应该更高
这是实现所需结果的最简单方法，感谢@Suraj
这就是答案
最佳解决方案。谢谢！

【解决方案3】：

我认为您混淆了不同语言的语法。

&#10; 是（ASCII 10 的 HtmlEncoded 值或）HTML 字符串中的换行字符文字。但是换行符确实 NOT 在 HTML 中呈现为换行符（请参阅底部的注释）。
\n 是 Javascript 字符串中的换行字符文字 (ASCII 10)。
<br/> 是 HTML 中的换行符。许多其他元素，例如<p>、<div> 等也会呈现换行符，除非被某些样式覆盖。

希望下面的illustration 会让它更清楚：

T.innerText = "Position of LF: " + t.value.indexOf("\n");

p1.innerHTML = t.value;
p2.innerHTML = t.value.replace("\n", "<br/>");
p3.innerText = t.value.replace("\n", "<br/>");

<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='T'></p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>

关于Html的几点注意事项：

TEXTAREA 元素的innerHTML 值不会呈现 Html。请尝试以下操作：<textarea>A <a href='x'>link</a>.</textarea> 来查看。
P 元素将所有连续的空白（包括新行）呈现为一个空格。
LF 字符不会呈现到 HTML 中的新行或换行符。
TEXTAREA 将 LF 呈现为文本区域框中的新行。

【讨论】：

这篇文章表面上看起来很复杂，但实际上包含了很多有用的信息。如果您以编程方式向您的<textarea/> 添加行，这就是您需要的帖子！
<br/> 是我要找的
确实非常有用的帖子。大多数新手都会混淆这些

【解决方案4】：

我发现String.fromCharCode(13, 10) 在使用视图引擎时很有帮助。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

这会创建一个包含实际换行符的字符串，因此会强制视图引擎输出换行符而不是转义版本。例如：使用 NodeJS EJS 视图引擎 - 这是一个简单的例子，其中任何 \n 都应该被替换：

viewHelper.js

exports.replaceNewline = function(input) {
    var newline = String.fromCharCode(13, 10);
    return input.replaceAll('\\n', newline);
}

EJS

<textarea><%- viewHelper.replaceNewline("Blah\nblah\nblah") %></textarea>

渲染

<textarea>Blah
blah
blah</textarea>

全部替换：

String.prototype.replaceAll = function (find, replace) {
    var result = this;
    do {
        var split = result.split(find);
        result = split.join(replace);
    } while (split.length > 1);
    return result;
};

【讨论】：

换行符 = String.fromCharCode(13, 10);是在运行时以编程方式添加新行的唯一对我有用的东西。对此 +1。
我想建议一种更简单的方法来全部替换： var regExp = new RegExp(find,"gi"); str=str.replace(regExp,replace);
我做了s = s.replace(/\\n/g, String.fromCharCode(13, 10) )。不过这很神奇。谢谢。

【解决方案5】：

<textarea cols='60' rows='8'>This is my statement one.

This is my statement2</textarea>

小提琴表明它可以工作：http://jsfiddle.net/trott/5vu28/。

如果您真的希望它在源文件中的单行上，您可以插入 HTML 字符引用以进行换行和回车，如@Bakudan 的答案所示：

  &lt;textarea cols='60' rows='8'&gt;This is my statement one.&amp;#13;&amp;#10;This is my statement2&lt;/textarea&gt;

【讨论】：

【解决方案6】：

试试这个..它的工作原理：

<textarea id="test" cols='60' rows='8'>This is my statement one.&#10;This is my statement2</textarea>

替换
标签：

$("textarea#test").val(replace($("textarea#test").val(), "<br>", "&#10;")));

【讨论】：

它实际上是 $("textarea#test").val().replace(/\n/g, " "); （这将替换所有出现的新行）

【解决方案7】：

要在文本区域内换行，请在此处放置一个实际的换行符：

    <textarea cols='60' rows='8'>This is my statement one.
    This is my statement2</textarea>

【讨论】：

【解决方案8】：

您可能想要使用\n 而不是/n。

【讨论】：

好吧，文字 \n 也不起作用，它需要是一个 actual 换行符。
是的，当然。但我（错误地？）假设他已经知道这一点。

【解决方案9】：

经过大量测试，以下代码在 Typescreipt 中适用于我

 export function ReplaceNewline(input: string) {
    var newline = String.fromCharCode(13, 10);
    return ReplaceAll(input, "<br>", newline.toString());
}
export function ReplaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}

【讨论】：

【解决方案10】：

我的.replace()function 使用其他答案中描述的模式不起作用。适用于我的情况的模式是：

var str = "Test\n\n\Test\n\Test";
str.replace(/\r\n|\r|\n/g,'&#13;&#10;');

// str: "Test&#13;&#10;&#13;&#10;Test&#13;&#10;Test"

【讨论】：

【解决方案11】：

T.innerText = "LF 位置：" + t.value.indexOf("\n");

p3.innerText = t.value.replace("\n", "");

<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='p3'></p>

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

【解决方案12】：

如果你正在使用 react

函数内部

const handleChange=(e)=>{
const name = e.target.name;
let value = e.target.value;
value = value.split('\n').map(str => <span>{str}<br/></span>);
SetFileds({ ...fileds, [name]: value });
}

【讨论】：

【解决方案13】：

只需使用<br>
例如：

<textarea>
blablablabla <br> kakakakakak <br> fafafafafaf 
</textarea>

结果：
blablablabla
kakakakakak
fafafafafaf

【讨论】：