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>
Keep line breaks with jQuery .text() in textarea
To get line breaks use
$(this).html()
instead of$(this).text()
.To use the line breaks inside the textarea replace the
<br>
with
This line:
var currval = $(this).text().replace(/\r?\n/g, '<br />');
Should be:
var currval = $(this).html().replace(/<br> ?/g, '
');
Updated JSFiddle
Line breaks in textarea element
You could use the
(it means new line in html) but maybe that's not a nice formatting, like you said...
The only way I can think to remove this issue is to remove the indentation. Its not the end of the world, but is there another way, to keep the nice formatting?
<tr>
<td class="label">Clinic Times:</td>
<td><textarea name="familyPlanningClinicSessionsClinicTimes">Monday:
Tuesday:
Wednesday:
Thursday:
Friday:
Saturday:
Sunday:</textarea></td>
</tr>
Limit line breaks in textarea
You can use the String
methods search
and include
inside a while
loop to remove all but one of a given repeated character.
text = "abc\n\n\ndef\n\nghi";
document.write('<textarea rows=6>'+text+'</textarea>');
while (text.includes("\n\n"))
text = text.replace("\n\n","\n");
document.write('<textarea rows=6>'+text+'</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';
}
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.
line breaks in a textarea
Don't do nl2br
when you save it to the database. Do nl2br
when you're displaying the text in HTML. I can strongly recommend to not store any HTML formatting in the database (unless you're using a rich HTML editor as well, in which case it would be silly not to).
A newline \n
will just become a newline in the textarea.
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);
Related Topics
Ssl Operation Failed with Code 1: Dh Key Too Small
PHP Emitting 500 on Errors - Where Is This Documented
MySQL Db Question Marks Instead of Hebrew Characters..
Regex Backreference to Match Different Values
How to Get PHP to Produce a Backtrace Upon Errors
Php: Possible to Automatically Get All Posted Data
Determining What Classes Are Defined in a PHP Class File
How to Override Trait Function and Call It from the Overridden Function
How to Use Mamp's Version of PHP Instead of the Default on Osx
Stop Caching for PHP 5.5.3 in Mamp
Using PHP to Output an Mp4 Video
Passing an Array Using an HTML Form Hidden Element
Unique and Temporary File Names in PHP
Back to Previous Page with Header( "Location: " ); in PHP
Send Email with PHPmailer - Embed Image in Body