HTMLテキストエリアに改行を追加する方法は？

<textarea>JavaScriptで編集しています。問題は、改行すると表示されないことです。これどうやってするの？

関数を作成するための値を取得していますが、改行されません。

改行（\n\r？）がHTML <br/>タグと同じではないという問題が原因です。

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

更新

多くのコメントと私の経験から、この<br> ソリューションが期待どおりに機能していないことがわかります。ここに、textarea「\ r \ n」を使用して新しい行を追加する方法の例を示します

function log(text) {
    var txtArea ;

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

私はこれを編集することにしました。これは、新しい質問としてではなく、あまりにも人気が高すぎて間違っていたり不完全だったりするためです。

一般的なJavaスクリプトを使用していて、テキスト領域の値に文字列を割り当てる必要がある場合

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

あなたは交換する必要がある\nか< br >に\\\n

それ以外の場合はUncaught SyntaxError: Unexpected token ILLEGAL、すべてのブラウザに表示されます。

多分誰かがこれが便利だと思う：

サーバー変数からJavaScript変数に渡される改行に問題があり、JavaScriptがそれらをtextareaに書き込みました（knockout.js値バインディングを使用）。

解決策は新しい行を二重にエスケープすることでした：

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

サーバー側では、単一のエスケープ文字ではJavaScriptが解析されなかったためです。

あなたは使用する必要がある\nためlinebreaks内部textarea

自分のページ内にテキストを表示したい場合は、<pre>タグを使用できます。

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>

新しい行は、ブラウザにとっては空白であり、通常のスペース（ ""）と同じように扱われます。新しい行を取得するには、<BR />要素を挿入する必要があります。

問題を解決する別の試み：textareaにテキストを入力し、ボタンの後ろにJavaScriptを追加して、非表示の文字を読み取り可能なものに変換し、結果をにダンプしDIVます。それはあなたのブラウザが何を望んでいるかを教えてくれます。

#infoartistが続くidのテキストエリアがあります：

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

JavaScriptコードでは、textareaの値を取得し、エスケープする新しい行（\ n \ r）<br />を次のようなタグで置き換えます。

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 />');

お役に立てば幸いです。:-)

testareaの値を改行してサーバーに送信するだけの場合は、nl2brを使用します。

これは私が抱えていたのと同じ問題で私がしたことです。

私がjspの次​​のページにテキストを渡すとき、私はそれを次のようなものではなくtextareaとして読んでいます

したがって、出力は希望どおりになりました。その他のプロパティについては、次のように使用できます。

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