web-dev-qa-db-ja.com

textareaの.val（）は新しい行を考慮しません

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

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

スタックオーバーフローの質問後のプレビューでこれを行うため、新しい行を含めるプレビューをどのように実現できますか。

ありがとう。

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

jqueryhtmltextareanewlineenter
15
H Bellamy

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

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

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

39
Matt Ball

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/

12
js-coder

このようなものを試してください：

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

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

<div>タグに<pre> 鬼ごっこ：

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

そしてそれはうまくいくでしょう。

3
Mike Christensen
$( "#watched_textarea" ).keyup( function() {
   $( "#output_div" ).html( $( this ).val().replace(/[\r\n]/g, "<br />") );
});

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

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

2
Jasper

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

次のような単純なnewline-to-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

2
Nanne

その場合

  • textareaの.val（）を別のページに表示しない（たとえば、フォームをサーブレットに送信して別のJSPに転送する）。

  • javaScript/JQuery内でURLエンコーディングの一部としてtextareaの.val（）を使用する（たとえば、本文をtextareaの内容としてmailto：を使用）

次に、textareaの説明を次のようにURLEncodeする必要があります。

var mailText = $('#mailbody').val().replace(/(\r\n|\n|\r)/gm, '%0D%0A');
2
RuntimeException

簡単な解決策があります：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>
1
Sanjib Debnath

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/>'))
});
0
Nithin Chandran

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

私のコードスニペットは

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

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

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

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

0
Sunil Kumar
<?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マニュアルリンク

0
crazyivan