web-dev-qa-db-ja.com

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

JavaScriptでテキストエリアを編集しています。問題は、改行を入れると表示されないことです。これどうやってするの？

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

javascripttextarealine-breaks
147
djairo

問題は、改行（\n\r？）がHTMLの<br/>タグと同じではないという事実に起因しています。

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

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

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

\nまたは< br >を\\\nに置き換える必要があります

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

22
jit

linebreaks内のtextareaには\nを使用する必要があります

13
strubester

誰かがこれを便利だと思うかもしれません：

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

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

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

サーバー側では、エスケープ文字が1つだけの場合、javascriptは解析されませんでした。

13
0lukasz0

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

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

3
Aaron Digulla

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

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});
<textarea placeholder="type text here"></textarea>
<pre>
The
new line will
be respected
</pre>
3
Cristian Traìna

IDが＃infoartistのテキストエリアがあります：

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

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

2
NgaNguyenDuy

ここに私が持っていた同じトラブルのためにしたことです。

jspの次​​のページにテキストを渡すとき、私はそれを何かのように読むのではなく、テキストエリアとして読んでいます

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

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

Testareaの値を改行してサーバーに送信する必要がある場合は、 nl2br を使用します

0
Igor L.