7

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>
ercan
  • 101
  • 1
  • 1
  • 7

4 Answers4

21

The best and easy way to fix line breaks on the output use these simple css:

.support-answer-textarea {
    white-space: pre-wrap;
}
radbyx
  • 9,352
  • 21
  • 84
  • 127
Mubashar
  • 284
  • 2
  • 9
8

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>
Faramarz Salehpour
  • 591
  • 1
  • 3
  • 14
  • 1
    thanks @Faramarz Salehpour but in first line adding br but second and more not adding br in output – ercan Apr 11 '15 at 07:26
3

for me, I had a e.preventDefault() for only Enter keypress on a parent element, this prevents a new line from adding.

Salman
  • 892
  • 12
  • 13
0

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

Daan
  • 1,663
  • 1
  • 15
  • 13