如何在文本区域元素中添加新行?

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

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


This is my statement2</textarea>

显示它工作的小提琴:http://jsfiddle.net/trott/5vu28/。

如果你真的想让它在源文件中的单行上，你可以插入HTML字符引用，用于换行和回车，如@Bakudan的回答所示:

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

试试这个。工作原理:

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

替换<br>标签:

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

试试这个:

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


 Line Feed and 
 Carriage Return are HTML entities^wikipedia. This way you are actually parsing the new line ("\n") rather than displaying it as text.

要在文本区域内获得一个新行，在那里放一个实际的换行符:

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

这将创建一个包含实际换行符的字符串，从而迫使视图引擎输出换行符而不是转义版本。使用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>

replaceAll:

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

经过大量的测试，下面的代码在typescript中为我工作

 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);
}

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

• 
是HTML字符串中的换行字符文字(HtmlEncoded值为ASCII 10或)。但是换行字符NOT在HTML中呈现为换行符(见底部注释)。

• \n是Javascript字符串中的换行字符文字(ASCII 10)。

• <br/>是HTML中的换行符。许多其他元素，如<p>， <div>等，也呈现换行符，除非被某些样式覆盖。

希望下面的插图能让你更清楚:

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呈现为文本区域框内的新行。

我的__abc0函数使用其他答案中描述的模式不工作。在我的案例中起作用的模式是:

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


// str: "Test

Test
Test"

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

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


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


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

只使用<br>
例:

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

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

white-space: pre-wrap;

如果你使用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 });
}

你还应该检查元素的css white-space属性(mdn文档)，确保它被设置为一个不抑制换行的值，例如:

white-space: pre-line;

你会对这3个值感兴趣:

< p > 精准医疗 < br > 保留了空白的序列。线路只有在 源中的换行符和at <br>< / p >元素。 < p > pre-wrap < br > 保留了空白的序列。线路断在 换行符，at <br>，以及必要时填充行框

pre-line
空格序列被折叠。线路断在 换行符，at <br>，以及必要时填充行框

一个简单而自然的解决方案是使用
字符实体引用，而不涉及CSS样式或像
这样的数字字符引用:

The cardinal directions are:
- North
- East
- South
- West

请注意:因为它被简单地定义为LF(换行，或U+000A Unicode码位)字符，所以不能100%确定它是否适合需要整个CR + LF(回车+换行)序列的情况。但后来，它在我在Windows 10上进行的Chrome、Edge和WebView2测试中都能运行，所以应该可以使用。