How to add a new line in textarea element?
Try this one:
<textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>
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>
How to add line breaks to an HTML textarea
The problem comes from the fact that line breaks (\n\r
?) are not the same as HTML <br/>
tags:
var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');
Since many of the comments and my own experience have shown me that this <br>
solution is not working as expected, here is an example of how to append a new line to a textarea
using '\r\n':
function log(text) {
var txtArea;
txtArea = document.getElementById("txtDebug");
txtArea.value += text + '\r\n';
}
Javascript append text to textarea with line break
Include newline character before .value
at attribute event value
<input type="button" class="copy_submit" onclick="document.forms['merge_form'].notes1.value += '\n' + document.forms['merge_form'].notes2.value;" value="<< Copy" />
How to add line-breaks to a textarea with text over more lines
You can add the attribue wrap="hard"
and it will send a newline wherever it wraps:
<textarea wrap="hard" name="text-1" id="text-1" rows="2" maxlength="35">Click here to enter text</textarea>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
Edit:
the cols attribute must be specified.
Add New Line in textarea by getElementById().value not Working
You need to add "\n" to the end of the string while adding text to text area, then this "\n" ensures that row will be displayed in a new line instead of same line.
Look at the following code
<!DOCTYPE html><html><body><script>function appendText(){debugger;var ele = document.getElementById("textArea");var text = ele.value;text += "im clicked\n";text +="clicked again\n";text +="clicked third time\n";text +="clicked forth time";ele.value = text;}</script><textarea rows="4" cols="50" id="textArea">At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
<button type="button" onclick="appendText()">Click me </button></body></html>
Related Topics
Submitting a Form by Pressing Enter Without a Submit Button
What to Use in Place of ::Ng-Deep
How to Create Your Own HTML Tag in Html5
Styling Part of the Option Text
How to Change Bootstrap 3 Column Order on Mobile Layout
How to Specify Line Breaks in a Multi-Line Flexbox Layout
Does ≪Style≫ Have to Be in the ≪Head≫ of an HTML Document
Limit Scope of External CSS to Only a Specific Element
Change Bootstrap Tooltip Color
≪!--[If !Ie]≫ Is Not Working as Expected in This Case
Detect When an Html5 Video Finishes
Change Select List Option Background Colour on Hover
How to Replicate Background-Attachment Fixed on Ios
Why Does Styling the Background of the Body Element Affect the Entire Screen
Css Two Divs Next to Each Other
Ie8 Support For CSS Media Query
Why Is Form Enctype=Multipart/Form-Data Required When Uploading a File
Why Do Absolute Elements Stack Up on Each Other Instead of Stacking One After the Other