jquery - 从 textarea 向段落添加换行符

Question

我有一个textarea框，用户在其中输入消息，然后输出到paragraph标记中。
我成功捕获了文本，但似乎无法捕获换行符。
这是我的小提琴

理想情况下是字符串替换，例如我正在寻找的<br/>or 。 任何帮助将不胜感激，谢谢。\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>

Answer 1

您可以只使用 keydown 事件来做到这一点：

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访问之前填充 。

Answer 2

您可以只使用 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/

Answer 3

您正在覆盖函数<br>中的 s 。keyup摆脱该keydown功能并将其更改keyup为：

txtBox.keyup(function(){
    $('p.msg').html(txtBox.val().replace(/\n/g, '<br>'));
});

Answer 4

您的处理程序将在运行后立即keyup覆盖内容。在你的 keyup 中使用它：p.msgkeydown

$('p.msg').html(txt.replace("\n","<br/>"));