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

Posted 2023-05-07

【中文标题】换行符在 Textarea 输出中不起作用

【英文标题】：Line Breaks not working in Textarea Output

【发布时间】：2015-06-16 23:11:15

【问题描述】：

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

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

.support-answer-textareawidth: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>

【参考方案1】：

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

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

$("#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>

【讨论】：

感谢@Faramarz Salehpour，但在第一行添加了 br，但第二行和更多不在输出中添加了 br

【参考方案2】：

使用这些简单的 css 来修复输出中的换行符的最佳且简单的方法：

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

【参考方案3】：

如果您从 textarea 捕获输入，通过 ajax 发送（保存到数据库，例如 mysql），然后想在 textarea 中显示结果（例如通过 php 回显），请在您的JS：

#get value of textarea
var textarea_value = $('#id_of_your_textarea').val();

#replace line break with line break input
var textarea_with_break = textarea_value.replace(/(\r\n|\n|\r)/gm, '
'); 

#url encode the value so that you can send it via ajax
var textarea_encoded = encodeURIComponent(textarea_with_break);

#now send via ajax

您还可以在一行中执行上述所有操作。为了便于阅读，我用三个单独的变量完成了它。

希望对你有帮助。

在此处发布此内容，因为我花了大约一个小时才弄清楚这一点，并从以下答案中摸索解决方案（有关详细信息，请参阅）：

The .val() of a textarea doesn't take new lines into account

New line in text area

URL Encode a string in jQuery for an AJAX request

【参考方案4】：

对我来说，我有一个 e.preventDefault() 仅用于父元素上的 Enter 按键，这可以防止添加新行。