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

StackOverflow https://stackoverflow.com/questions/863779

質問

私はJavaScriptで<textarea>を編集しています。問題は、私はそれに改行を行うとき、彼らは表示されませんということです。私はこれを行うことができますどのように？

私は関数を記述するための値を取得していますが、それは、改行を与えることはありません。

役に立ちましたか？

解決

問題は、改行（\n\rは？）

HTMLの<br/>タグと同じではないという事実から来ています 
var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

他のヒント

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

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

あなたが\nする< br >または\\\nを交換する必要があります。

それ以外の場合は、すべてのブラウザでUncaught SyntaxError: Unexpected token ILLEGALを与えます。

あなたは\n内linebreaksためtextareaを使用する必要があります。

たぶん誰かが、これは便利ます：

私はjavascriptの変数にサーバー変数から渡された改行に問題があったが、その後、Javascriptを（knockout.js値バインディングを使用して）テキストエリアにそれらを書いていた。

ソリューションは、二重改行をエスケープしてます：

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

サーバ側で、なぜなら解析していなかったのjavascriptだけで、単一のエスケープ文字でます。

新しい行がブラウザにちょうど空白で、（」「）通常空間に任意の異なる扱われることはありません。新しい行を取得するには、<BR />要素を挿入する必要があります。

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

あなたがあなた自身のページ内のテキストを表示したい場合は、

、あなたは<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>

私が持っているIDを持つテキストエリアがあるの #infoartist のは、次のとおりです。

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

javascriptのコードでは、私は、テキストエリアの値を取得し、<br />タグで改行（\ n個の\ r）をエスケープ置き換えます、といったます：

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 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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top