Line Breaks not working in Textarea Output

问题

line breaks or pharagraph not working in textarea output? for example i am using enter for pharagraph in textarea but not working in output? How can i do that?

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

回答1:

When you hit enter in a <textarea>, you're adding a new line character \n to the text which is considered a white space character in HTML. HTML generally converts the sequence of all white spaces to a single space. This means that if you enter a single or a dozen of whitespace characters (space, new line character or tab) in a row, the only effect in resulting HTML is just a single space.

Now the solution. You can substitute the new line character (\n) to <br> or <p> tag using replace() method.

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

回答2:

If you are capturing an input from a textarea, sending it via ajax (saving to database, e.g. mysql) and then want to display the result in a textarea (e.g. by echoing via php), use the following three steps in your 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

You can also perform all of the above in one line. I did it in three with separate variables for easier readability.

Hope it helps.

Posting this here as it took me about an hour to figure this out, fumbling together the solutions from the answers below (see for more details):

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

来源：https://stackoverflow.com/questions/29574876/line-breaks-not-working-in-textarea-output

标签

textarea