1

ユーザーがメッセージを入力してマークアップに出力するtextareaボックスがありますparagraph。
テキストのキャプチャは成功しましたが、改行をキャプチャできないようです。
これが私のフィドル

です 理想的には、<br/>またはなどの文字列置換\nが私が探していたものです。
助けていただければ幸いです、ありがとう。

var txtBox = $('#myTextArea');
var txt = txtBox.val();

txtBox.keyup(function(){
        txt = txtBox.val();
        $('p.msg').html(txt);
});

txtBox.keydown(function (e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode == 13) {
                $('p.msg').append('<br />');//ApplyLineBreaks(txt);
        }
});

とマークアップ

<textarea id="myTextArea" class="form_0" name="Enter your message" type="text"></textarea>
<p class="msg" style="text-align: center;">msg here</p>
4

4 に答える 4

4

これは、キーダウンイベントだけで実行できます。

var txtBox = $('#myTextArea');
txtBox.keydown(function(e){
    var that = this;
    setTimeout(function(){
        $("p.msg").html(that.value.replace(/\n/g,"<br />"));
    },10);
});

http://jsfiddle.net/NJwhC/3/

setTimeout重要なのは、this.valueアクセスする前ににデータを入力できるようにすることです。

于 2012-11-20T21:36:22.910 に答える
3

CSSを使用して、空白を保持するように要素に指示することができます。

p.msg {
    display: block;
    white-space: pre;
}​

そして、JSコードを単純化します。

var $txtBox = $('#myTextArea');

$txtBox.keyup(function(){
    $('p.msg').text($txtBox.val());
}).trigger('keyup')​;

デモ： http： //jsfiddle.net/9a68r/4/

于 2012-11-20T21:35:18.880 に答える
2

<br>関数内のを上書きしていkeyupます。keydown関数を削除し、を次のように変更しkeyupます。

txtBox.keyup(function(){
    $('p.msg').html(txtBox.val().replace(/\n/g, '<br>'));
});
于 2012-11-20T21:35:09.050 に答える
1

ハンドラーは、実行直後keyupの内容を上書きします。キーアップでこれを使用します。p.msgkeydown

$('p.msg').html(txt.replace("\n","<br/>"));
于 2012-11-20T21:39:49.537 に答える