textarea - 换行符在 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在 <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>