Question

换行符或字段在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-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

使用以下简单的CSS来解决输出断行的最佳简便方法：

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

Answer 2

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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, '&#13;&#10;'); 

#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

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

3 个答案: