换行符在 Textarea 输出中不起作用

Question

换行符或 pharagraph 在 textarea 输出中不起作用？例如，我在 textarea 中为 pharagraph 使用 enter 但在输出中不起作用？我怎样才能做到这一点？

$("#submit-code").click(function() {
  $("div.output").html($(".support-answer-textarea").val());
}).next().click(function () {
  $(".support-answer-textarea").val($("div.output").html());
});

.support-answer-textarea{width:100%;min-height:300px;margin:0 0 50px 0;padding:20px 50px;border-top:1px solid #deddd9;border-bottom:1px solid #deddd9;border-left:none;border-right:none;box-sizing:border-box;letter-spacing:-1px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea id="support-answer-textarea" class="support-answer-textarea" placeholder="Destek Konusunu Cevapla!"></textarea>
<button type="submit" id="submit-code" class="btn btn-success">Submit Your Code</button>
<div class="output"></div>

Answer 1

当您enter输入 a 时<textarea>，您\n将向文本中添加一个换行符，该字符在 HTML 中被视为空白字符。HTML 通常将所有空格的序列转换为单个空格。这意味着如果您在一行中输入一个或十几个空白字符（空格、换行符或制表符），结果 HTML 中的唯一效果就是一个空格。

现在的解决方案。您可以使用方法将换行符 ( \n)替换为<br>或<p>标记replace()。

$("#submit-code").click(function() {
  $("div.output").html($(".support-answer-textarea").val().replace(/\n/g, "<br>"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<textarea id="support-answer-textarea" class="support-answer-textarea"></textarea>
<button type="submit" id="submit-code">Submit Your Code</button>
<div class="output"></div>

Answer 2

在输出中修复换行符的最好和最简单的方法是使用这些简单的 css：

.support-answer-textarea {
    white-space: pre-wrap;
}