Question

要提供条目的预览，我使用jQuery作为以下

$('#text').on('input',function(){
    $('#previewText').html($('#text').val());
});

#text是一个textarea而#previewText是一个简单的<p>

除了在某一点上它运作良好：当我点击ENTER时它无法识别。而不是想要的换行符，它只是在同一行中写入。

有没有可能用这种方法识别断线？

Answer 1

从此处更改您的代码：

$('#text').on('input',function(){
    $('#previewText').html($('#text').val());
});

到此：

$('#text').on("input", function () {
        $('#previewText').html($(this).val().replace(/\n/g, "<br/>"));
});

Here is the JSFiddle demo

修改后的代码的作用是将换行符"\n"替换为"<br/>"，这是标准换行符的 HTML版本

Answer 2

尝试使用这个：就像textarea一样，它是一个新的行字符，而在新行的html中我们使用了一个标签。所以我的想法是用tex标签替换textarea的新行char。工作示例：http://jsfiddle.net/qh6cepp7/

$('#text').keypress(function(event){ 
    var keycode = (event.keyCode ? event.keyCode : event.which);
    $('#previewText').html($('#text').val().split("\n").join("<br>"));
});

jQuery onInput识别换行符

2 个答案: