jQuery onInput 识别换行符

Question

为了提供条目的预览，我使用 jQuery 如下

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

#text 是一个文本区域，#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

尝试使用这个：在文本区域的情况下，它是一个换行符，在 html 中我们使用
标签作为换行符。所以想法是用
标签替换文本区域的新行字符。工作示例：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 识别换行符

jQuery onInput recognize line break

html

jquery

textarea

input