Capture Newline from a Textarea Input

Capture newline from a textarea input

Try nl2br() instead:

echo nl2br($str);

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 detect line breaks in a text area input?

You can use match on the string containing the line breaks, and the number of elements in that array should correspond to the number of line breaks.

enteredText = textareaVariableName.val();
numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length;
characterCount = enteredText.length + numberOfLineBreaks;

/\n/g is a regular expression meaning 'look for the character \n (line break), and do it globally (across the whole string).

The ||[] part is just in case there are no line breaks. Match will return null, so we test the length of an empty array instead to avoid errors.

Read new line from textarea

Basically a white space character(which includes new line chr too) is converted by the HTML to single space.
You will need to write onChange method for the textarea to convert the new line char to either <br> or <p>. By this you will be able to hold the property of new line.

Please review this answer:
https://stackoverflow.com/a/29575181/3465242

How to get line breaks from textarea

You need to use nl2br() function. It will format your input the exact way you'd written in your text area.

When you're retrieving your POST data, write this:

echo nl2br($_POST['sendto']);

Preserve line breaks in textarea

Generally you just need to add

• white-space: pre-line; whitespace trimmed to single whitespace or

• white-space: pre-wrap; all whitespace preserved

to the element's style (CSS), where you want your text rendered with line-breaks.

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>

Adding a newline character and display input from a textarea

You don't want to insert the <br/> tag as they type. You really don't want to do anything to their text as they type. If you want to maintain their line breaks, you can convert them to <br/> tags before you inject them into an element.

$('#text').keyup(function(event) {  var text = $("#text").val();  text = text.replace(/(?:\r\n|\r|\n)/g, '<br />');  $("#result").html(text);});

textarea {  min-width: 200px;  min-height: 200px;  float: left;}
#result {  float: left;  border: 1px solid red;  padding: 10px;  margin-left: 10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><textarea id="text" placeholder="Type in here"></textarea><div id="result"></div>

How to render textarea input with new line

Figured it out.

The bug was in the html that rendered the text. I had

{{item.note}}

in a for loop, which I changed to

{{item.note | safe}}

I'm also using

note = note.replace('\n', '<br>')

for the python.

---

Related Topics