文本区域中的新行

Question

<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文件时新行没有反映出来.我怎样才能做到这一点？

Answer 1

试试这个:

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



换行和回车符是HTML实体^维基百科.这样,您实际上是在解析新行("\n")而不是将其显示为文本.

Answer 2

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

white-space: pre-wrap;

Answer 3

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

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

Answer 5

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

• 
是(ASCII 10的HtmlEncoded值或)HTML字符串中的换行符字符.但是换行符不会不呈现在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的几点注意事项:

• 元素的innerHTML值TEXTAREA不会呈现Html.尝试以下方法:<textarea>A <a href='x'>link</a>.</textarea>看看.
• 该P元素将所有连续的空格(包括新行)渲染为一个空格.
• LF字符不会呈现为HTML中的新行或换行符.
• 该TEXTAREA呈现LF作为文本区域箱内的新线.

Answer 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;")));

Answer 7

要在文本区域内获取新行,请在其中放置实际的换行符:

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

Answer 8

您还应该检查元素的 csswhite-space属性（mdn docs），确保将其设置为不会抑制换行符的值，例如：

white-space: pre-line;

您会对这 3 个值感兴趣：

pre
的空白序列被保留。仅在源中的换行符和 <br> 元素处断行。

预换行
保留空白序列。换行符、<br> 处以及填充行框所需的位置都会断行。

前行
空白序列被折叠。换行符、<br> 处以及填充行框所需的位置都会断行。

Answer 9

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