18

.val()jQueryのaのアイテムのプロパティは、<textarea>新しい行では機能しないようです。テキストエリアはEnterキーを認識し、新しい行がそのままの状態でプレビューとして表示されるため、この関数が必要です。

ただし、何が起こるかは次のフィドルに示されています：http: //jsfiddle.net/GbjTy/1/。テキストは表示されますが、改行は表示されません。

プレビューに新しい行を含めるにはどうすればよいですか。これはStackOverflowPost Questionプレビューで行われるため、可能であることがわかります。

ありがとう。

PSこれに関連するSOに関する他のリンクを見たことがありますが、それらはすべて、エンドユーザーにコードを使用させると言っています。これは私にとって理想的な方法ではありません。エンドユーザーが特定のコードを記述せずにこれを実現するには、SO Question Previewのように、Enterがプレビューで正常に機能するようにするにはどうすればよいですか。

4

10 に答える 10

43

これはCSSの問題であり、JavaScriptの問題ではありません。HTMLはデフォルトで空白を折りたたむ—これには改行の無視が含まれる。

white-space: pre-wrap出力divに追加します。http://jsfiddle.net/mattball/5wdzH/

これはすべての最新のブラウザでサポートされています：https ：//caniuse.com/#feat=css3-tabsize

于 2011-12-12T21:24:46.513 に答える
15

textareasの強制された新しい行は\nsであり、textarea以外のHTMLタグはこれらを無視します。<br />これらの要素に新しい線を強制するために使用する必要があります。

すでにJavaScriptに依存しているため、CSSではなくJavaScriptを使用して修正することをお勧めします。

$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace(/\n/g, '<br />') );
});

更新されたバージョンはここにあります：http：//jsfiddle.net/GbjTy/2/

于 2011-12-12T21:25:04.813 に答える
3

次のようなものを試してください。

$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace('\n', '<br/>') );
});

HTMLでは、空白はデフォルトで無視されます。

<div>タグをタグに変更することもできます<pre>。

<pre id="output_div"></pre>

そして、それもうまくいくでしょう。

于 2011-12-12T21:25:46.713 に答える
3

その場合

  • テキストエリアの.val（）を別のページに表示していません（たとえば、フォームをサーブレットに送信して別のJSPに転送します）。

  • Javascript / JQuery内でURLエンコードの一部としてtextareaの.val（）を使用する（例：mailto：本文をtextareaコンテンツとして使用）

次に、次のようにテキストエリアの説明をURLエンコードする必要があります。

var mailText = $('#mailbody').val().replace(/(\r\n|\n|\r)/gm, '%0D%0A');
于 2012-12-18T12:39:06.673 に答える
2 
$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace(/[\r\n]/g, "<br />") );
});

<br>HTML出力の場合は、改行文字をタグに置き換える必要があります。

これがデモです：http：//jsfiddle.net/GbjTy/3/

于 2011-12-12T21:26:51.110 に答える
2

改行は完全に出力されますが、HTMLは改行を無視します。必要<br>です。

次のような単純な改行からbrへの関数を使用します。

function nl2br_js(myString) {
var regX = /\n/gi ;

s = new String(myString);
s = s.replace(regX, "<br /> \n");
return s;
}

$( "#watched_textarea" ).keyup( function() {
       $( "#output_div" ).html( nl2br_js($( this ).val()) );
    });

ここのjsfiddle：http: //jsfiddle.net/r5KPe/

ここからのコード：http：//bytes.com/topic/javascript/answers/150396-replace-all-newlines-br-tags

于 2011-12-12T21:26:57.607 に答える
1

簡単な解決策があります：preタグでコンテナを作成します。

        <textarea id="watched_textarea" rows="10" cols="45">test </textarea>
        <pre class="default prettyprint prettyprinted"><code ><span class="pln" id="output_div">fdfdf</span></code></pre>
        <script>
        $("#watched_textarea").keyup(function() {
            $("#output_div").html($(this).val());
        });
        </script>
于 2016-09-17T05:18:01.867 に答える
1

jqueryを使用したより便利な方法を見つけました。

サンプルコード

HTML

    <textarea></textarea>
    <div></div>
    <button>Encode</button>

JS

$('button').click(function() {

    var encoded = $('<label>').text($('textarea').val()).html();//the label element can be replaced by any element like div, span or else

    $('div').html(encoded.replace(/\n/g,'<br/>'))
});
于 2018-03-02T06:13:27.527 に答える
0 
<?php 

//$rsquery[0] is array result from my database query
//$rsquery[0] = 1.1st Procedure \n2.2nd Procedure
//txtRisks is a textarea

//sample1
function nl2br2($string) {
$string = str_replace(array("\r\n", "\r", "\n"), "<br />", $string);
return $string;
}

//sample2
function nl2br2($string) {
$string = str_replace(array("\r\n", "\r", "\n"), "\\n", $string);
return $string;
}

echo "$('#txtRisks').val('".nl2br2($rsquery[0])."')";

?>

PHPマニュアルリンク

于 2014-01-17T04:36:28.153 に答える
0

Laravelブレードテンプレートでjqueryを使用してtextarea値を設定しようとしましたが、変数に新しい行が含まれているため、コードが壊れていました。

私のコードスニペットは

$("#textarea_id").val("{{ $php_variable }}");

以下のようにコードスニペットを変更することで問題を解決しました。

$("#textarea_id").val("{{ str_replace(array('\r', '\n', '\n\n'), '\n', $php_variable }}");

あなたの誰かがこの問題に直面しているなら、これから利益を得るかもしれません。

于 2018-06-20T14:20:07.183 に答える