16

と が<textarea>あります<div>（<p>中身あり）。領域にテキストを入力する<p>と、keyUp の内容で が更新されます。

textarea から改行 (改行) を保持し、何らかの方法で div/p の改行のように動作させる方法はありますか?

二重の「改行」を</p><p>に置き換えることも可能ですか? これは wysiwyg が処理するものに近いですが、これは非常に小さなプロジェクトなので、これは望ましくありません。

これは私がこれまでに得たものです。

$(".box textarea").keyup(function () {
  var value = $(this).val();  
  $('.box p').text(value);
});
4

4 に答える 4

40

おそらく、CSS ルールwhite-space: preまたはwhite-space: pre-wrapをに追加する必要があり.box pます。これにより、空白がそのまま表示されます。

于 2013-04-23T09:10:00.767 に答える
2

最もシンプルで安全な純粋な jQuery ソリューションは次のとおりです。

$(".box textarea").keyup(function () {
  var value = $(this).val();
  $('.box p').text(value).css('white-space', 'pre-wrap');
});

もちろん、.box p { white-space: pre-wrap }静的な CSS スタイルに追加できる場合は、jQuery でそれを挿入する必要はありません。

(またwhite-space: pre-wrap、複数の連続したスペースが保持され、単一のスペースに折りたたまれないようにすることにも注意してください。それを望まないが改行を保持したい場合は、white-space: pre-line代わりに使用してください。)

Ps。入力に​​または などの HTML メタ文字が含まれている場合、エスケープされていないユーザー入力を渡すと、出力が壊れてしまい、HTML インジェクションやクロスサイト スクリプティング (XSS ) 悪意のある攻撃者によって入力が影響を受ける可能性がある場合に攻撃します。.html()&<

どの形式でもCSS プロパティを絶対に使用しないと主張する場合は、タグをwhite-space追加する前に、まず入力内の HTML メタ文字をエスケープする必要があります。<br>おそらく、これを行う最も簡単で安全な方法は、ブラウザーにエスケープを処理させることです。たとえば、次のようにします。

$(".box textarea").keyup(function () {
  var value = $(this).val();
  $('.box div.output').text(value).html(function (index, html) {
    return '<p>' + html.replace(/[^\S\n]+\n/g, '\n').replace(/\n\n+/g, '</p><p>').replace(/\n/g, '<br>') + '</p>';
  });
});

これは、最初に (自動的に HTML エスケープする)を使用して入力テキストをターゲット要素にコピーし.text()、結果の HTML コードを変更して行から末尾の空白を削除し、複数の連続する改行を段落区切りに折りたたみ、最後に単一の改行を次のように置き換えます。<br>タグ。

(出力で複数の段落を許可するために、ターゲット要素は実際には要素<div>ではなく、 である必要があることに注意してください<p>。ある要素を別の要素内にネスト<p>することは有効な HTML ではなく、異なるブラウザーで一貫した結果が得られない場合があります。)

于 2016-11-04T16:11:26.037 に答える