Question

我有一个textarea框，用户在其中键入消息，然后输出到paragraph标记。
我成功捕获了文本，但似乎无法捕获换行符 heres my fiddle

理想情况下，我需要的是<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>

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>功能中的keyup。摆脱keydown函数并将keyup更改为：

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

Answer 4

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

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

从textarea向段落添加换行符

4 个答案: