web-dev-qa-db-ja.com

テキスト領域に改行

<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ファイルのレンダリング中に新しい行が反映されません。どうやってやるの？

htmltextarealine-breaks
248
discky

これを試してください。

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

&#10;改行と&#13;改行は HTMLエンティティウィキペディア 。こうすることで、実際には新しい行をテキストとして表示するのではなく、新しい行（ "\ n"）を解析しています。

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

This is my statement2</textarea>

動作することを示すフィドル： http://jsfiddle.net/trott/5vu28/ 。

本当にこれをソースファイルの単一行にしたいのであれば、@Bakudanからの回答に示すように、改行とキャリッジリターンのためのHTML文字参照を挿入することができます。

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

私はビューエンジンを使用するときString.fromCharCode(13, 10)が役に立つとわかりました。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

これにより、実際の改行文字を含む文字列が作成されるため、ビューエンジンはエスケープバージョンではなく改行を出力します。例：NodeJS EJSビューエンジンを使用する - これは簡単な例で、任意のものを置き換える必要があります。

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;
};
21
Daniel Flippance

私はあなたが異なる言語の構文を混同していると思います。

  • &#10;は、（{ASCII 10のHtmlEncoded値）またはHTML文字列内の改行文字リテラルです。しかし、改行文字は、HTMLの改行としてNOTをレンダリングします（下の注を参照）。

  • \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について注意すべき点がいくつかあります。

  • innerHTML要素のTEXTAREA値は、Htmlをレンダリングしません。次のことを試してください：<textarea>A <a href='x'>link</a>.</textarea>見て。
  • P要素は、すべての連続した空白（改行を含む）を1つの空白としてレンダリングします。
  • LF文字は、HTMLの改行または改行には表示されません。
  • TEXTAREAはLFをテキスト領域ボックス内の新しい行としてレンダリングします。
14
Old Geezer

Text-areaの中に新しい行を入れるには、そこに実際の改行を入れます。

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

これを試してください..それは動作します：

<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;")));
7
Salt Hareket

\nの代わりに/nを使用することをお勧めします。

5
Zar

たくさんのテストの後、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);
}
2
Ali

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>
0
Naresh kumar

他の回答で説明されているパターンを使用した私の.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"
0
Brunno Vodola Martins

CSSを使用してTextareaにEnterキーワード行を入力します。

white-space: pre-wrap;
0
Suraj Kumar Maurya