Add a linebreak in an HTML text area
If it's not vb you can use
(ascii codes for cr,lf)
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';
}
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>
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>
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>
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>
Line break inside text area html
You need to convert the line breaks from the textarea (\r
or \n
) into line breaks your PDF can understand (<br />
<div>
<li>
etc).
a simple PHP way is
$string = nl2br($string);
// converts \n to <br />
If you need to transform those line breaks on the fly (like you're capturing the input and displaying it formatted as the user types), then do it in javascript. Here is a handy function taken from: https://stackoverflow.com/a/7467863/1772933
function nl2br (str, is_xhtml) {
if (typeof str === 'undefined' || str === null) {
return '';
}
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
Here is an example of how to use that function as the user is typing
$('#TextArea').keypress(function(evt){
$('#TextArea').html(nl2br($('#TextArea').val())); // replace linebreaks first
$('#pdfPreviewArea').html($('#TextArea').val()); // copy to #pdfPreviewArea
});
Related Topics
How to Achieve a Text Loading Animation Over Multiple Lines
Unordered List (<Ul>) Default Indent
Curved Lines Using Only HTML And/Or CSS
The Best Way to Parse a JSON in Dart
How to Hide Full Screen Button of The Video Tag in HTML5
Wrap Anchor Tag Around Li Element
HTML5 Autoplay Video in Mobile Device
How to Select Multiple Elements in The Chrome Developer Tools Elements Panel
Display: Flex Not Working on Internet Explorer
Text Wrapping Around an Absolute Positioned Div
Prevent a Flex Items Height from Expanding to Match Other Flex Items
Make Flex Container Take Width of Content, Not Width 100%
How to Open Native iOS App (Calendar, Notes...) from a Link on Website
Font Size Extremely Small on Mobile Devices
How to Use Nth-Child for Styling with a Table with Rowspan
How to Align Dt and Dd Side-By-Side Using Flexbox with Multiple Dd Underneath The Other