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);
Preserving line breaks from text-area when sending mail
Since you are sending HTML E-Mails (msgObj.IsBodyHtml = true;
) you need to replace newlines with the <br />
tag.
Replace the linestring YourMessageBody = MailBody.Value;
with
string YourMessageBody = MailBody.Value.Replace(Environment.NewLine, "<br />");
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">
Keep linebreaks when getting text from <textarea>
Depends on how you are storing the values. Remember that HTML and general input from fields following the whitespace rule, it will truncate/condense white space into a single entity.
So "Wide String" = "Wide String" and:
"Multi-line
string
here" will be truncated to "Multi-line string here" as you have experienced.
This is the default behavior.
So to keep your line breaks, spacing, etc.. you need to escape it or a process of encoding and decoding, before storing it.
It is explained here:
Many newcomers to web development cannot get their head around why the
carriage returns they made in their data on input from a textarea, or from a
text file, Excel spreadsheet etc. do not appear when the web page renders.The solution is fairly obvious once the newcomer realizes that a web
page is only the browser's interpretation of html markup, and that a
new line in html is represented by the
tag. So what is needed
is a way to swap carriage returns or line feeds with the
tag.
Well, a way to Replace() them, actually.
<%# Eval("MyMultiLineValue").ToString().Replace(<linebreak>,"<br />") %>
The string.Replace() method allows this, but we also need to identify
what we want to replace with the html tag. How is a new line
represented in C# or VB.Net?In C#, it's "\r\n", while in VB.Net, it's vbcrlf. However, there is
also a language independent option that does just the same thing:
Environment.NewLine.
<%# Eval("MyMultiLineValue").ToString().Replace(Environment.NewLine,"<br />") %>
Hope this helps! :)
Related Topics
Full Text Search in HTML Ignoring Tags/&
Flask - Calling Python Function on Button Onclick Event
How to Detect "Shift+Enter" and Generate a New Line in Textarea
Dynamically Loading CSS Stylesheet Doesn't Work on Ie
Forcing Web-Site to Show in Landscape Mode Only
Force Dom Redraw/Refresh on Chrome/Mac
How to Disable a Browser or Element Scrollbar, But Still Allow Scrolling With Wheel or Arrow Keys
How to Get the Actual Rendered Font When It's Not Defined in Css
JavaScript: Find Div'S Line-Height, Not CSS Property But Actual Line-Height
How to Print a Number With Commas as Thousands Separators in JavaScript
Referenceerror: $ Is Not Defined
How to Embed an Autoplaying Youtube Video in an Iframe
Submit Form and Stay on Same Page
Bootstrap Close Responsive Menu "On Click"
Why Should Y.Innerhtml = X.Innerhtml; Be Avoided
How to Dynamically Create CSS Class in JavaScript and Apply