jQuery onInput 识别换行符答案

【问题标题】：jQuery onInput recognize line breakjQuery onInput 识别换行符
【发布时间】：2015-09-28 20:16:54
【问题描述】：

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

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

#text 是一个文本区域，#previewText 是一个简单的<p>

它工作得很好，除了有一点：当我点击ENTER 时它无法识别。而不是想要的换行符，它只是写在同一行。

用这种方法有没有可能实现对换行符的识别？

【问题讨论】：

你听说过 textareas 吗？
什么意思？我当然听说过，因为我用过。

标签： jquery html input textarea

【解决方案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 版本。

【讨论】：

【解决方案2】：

尝试使用这个：在 textarea 的情况下，它是一个换行符，在 html 中我们使用一个
标签来换行。所以想法是用
标签替换 textarea 的新行字符。工作示例：http://jsfiddle.net/qh6cepp7/

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

【讨论】：