Preserve line breaks in textarea
Generally you just need to add
white-space: pre-line;
whitespace trimmed to single whitespace orwhite-space: pre-wrap;
all whitespace preserved
to the element's style (CSS), where you want your text rendered with line-breaks.
How do I preserve line breaks when getting text from a textarea?
The easiest solution is to simply style the element you're inserting the text into with the following CSS property:
white-space: pre-wrap;
This property causes whitespace and newlines within the matching elements to be treated in the same way as inside a <textarea>
. That is, consecutive whitespace is not collapsed, and lines are broken at explicit newlines (but are also wrapped automatically if they exceed the width of the element).
Given that several of the answers posted here so far have been vulnerable to HTML injection (e.g. because they assign unescaped user input to innerHTML
) or otherwise buggy, let me give an example of how to do this safely and correctly, based on your original code:
document.getElementById('post-button').addEventListener('click', function () { var post = document.createElement('p'); var postText = document.getElementById('post-text').value; post.append(postText); var card = document.createElement('div'); card.append(post); var cardStack = document.getElementById('card-stack'); cardStack.prepend(card);});
#card-stack p { background: #ddd; white-space: pre-wrap; /* <-- THIS PRESERVES THE LINE BREAKS */}textarea { width: 100%;}
<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:
Tuesday practice @ 5th floor (8pm - 11 pm)
Thursday practice @ 5th floor (8pm - 11 pm)
Sunday practice @ (9pm - 12 am)</textarea><br><input type="button" id="post-button" value="Post!"><div id="card-stack"></div>
HTML textarea to javascript and keep line break
Replace \n
,\r
,\n\r
with </br>
in java script:
var myLineBreak = thetext.replace(/\r\n|\r|\n/g,"</br>");
function textwrite(){ thetext = document.getElementById("text_change").value; var myLineBreak = thetext.replace(/\r\n|\r|\n/g,"</br>");
document.getElementById("demo").innerHTML = myLineBreak; }
<textarea id='text_change' oninput='textwrite()'></textarea> <p id="demo"></p>
How to keep linebreaks in html textarea POST data
Here is what finally solved the issue: I was using PHP's filter FILTER_FLAG_STRIP_LOW
(http://php.net/manual/en/filter.filters.flags.php) on the string before you output or store to the database you will remove the newline characters \r\n
.
To fix this issue you can use the FILTER_FLAG_ENCODE_LOW
instead of FILTER_FLAG_STRIP_LOW
as such:
$input = filter_var($input, FILTER_SANITIZE_STRING, FILTER_FLAG_ENCODE_LOW);
Angular 8 filter : preserve line breaks on text area input
Working Demo
Try this one in pipe:
export class LinebreaksPipe implements PipeTransform {
transform(value: string): string {
return value.replace(/\\n/g, '<br />');
}
}
In template file:
<p [innerHTML]="profileForm.get('personalizedMessage').value | linebreaks">
Preserve Line Breaks From TextArea
Two solutions for this:
PHP function
nl2br()
:e.g.,
echo nl2br("This\r\nis\n\ra\nstring\r");
// will output
This<br />
is<br />
a<br />
string<br />Wrap the input in
<pre></pre>
tags.See: W3C Wiki - HTML/Elements/pre
Keep line breaks in outputed div from textarea
Try setting white-space:pre;
or white-space:pre-wrap;
to the div.
$("textarea").blur(function() { $("div").html($("textarea").val());});
$("textarea").blur();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><textarea style="height:50px;">1. test2. test3. test</textarea>
<div style="white-space:pre;"></div>
Related Topics
Multiple Submit Buttons on HTML Form - Designate One Button as Default
PHP Mail() - How to Put an HTML Link in an Email
CSS Position Absolute and Full Width Problem
R Markdown HTML Number Figures
How to Handle Xml/HTML in Git Feature Branch Workflow
Multiple Submit Buttons on HTML Form - Designate One Button as Default
CSS Border Color Switch Animation: "From" Color Not Correct
Change The Color of Glyphicons to Blue in Some- But Not at All Places Using Bootstrap 2
Should Tables Be Avoided in HTML at Any Cost
Wrapping HTML Table Rows in <A> Tags
CSS Way to Horizontally Align Table
Why Does Width and Height of a Flex Item Affect How a Flex Item Is Rendered
What Is The Purpose for HTML's Tbody
How to Show HTML or Markdown in a Swiftui Text
Scrolling to an Anchor Using Transition/CSS3
Jquery - Follow The Cursor with a Div
How to Get The HTML Source of a Webpage in Ruby
HTML5 Input Box with Type="Number" Does Not Accept Comma in Chrome Browser