Read New Line from Textarea

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 read new line in a textarea form using bootstrap?

New lines are there, if you read and print that input string in console you will see new lines are coming.

If you want to print that input string in html then replace those new lines by <br>,

If you want to play with each line break them into array

<textarea id="textarea"></textarea>
<a href="#!" id="read" onclick="readTextArea()">read</a>

<script type="text/javascript">
  function readTextArea () {
    var data = $("#textarea").val();
    var dataNlToBr = data.replace(/\r?\n/g, '<br>');
    var dataArray = dataNlToBr .split('<br>');
    console.log(data);
    console.log(dataNlToBr);
    console.log(dataArray);

  }
</script>

How to read line by line of a text area HTML tag

Try this.

var lines = $('textarea').val().split('\n');
for(var i = 0;i < lines.length;i++){
    //code here using lines[i] which will give you each line
}

how to read new-line from a textarea in a form with PHP?

The newline character in PHP is presented by the string "\n".

If you want to reproduce the newlines of your users input in HTML, you have to convert every \n to a <br />. You could do that by hand or use the function nl2br in such a way:

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

Read new-lines in textarea BEFORE submitting form?

Seems like there is no build in tools to get this value. But we can calculate it.
Assume that the line-height in textarea is a known value (you can explicitly define it in css). So the code to calculate the number of rows would like this:

    var area = $('#myarea').get(0);

    //save the initial height of textarea
    var initialHeight = area.style.height;

    //set the height to 0 so scrollHeight will always return dynamic height
    area.style.height = '0px';

    //here we assume that the line-height equals to 15
    var numberOfRows = Math.floor(area.scrollHeight / 15);

    //restore textarea height
    area.style.height = initialHeight;

    console.log(numberOfRows);

Working example http://jsfiddle.net/J5UpF/

UPDATE

Just figured out the bug in Chrome with my code. I didn't take into account the scrollbar that appears on the right side of textarea. That leads to the wrong number of lines calculated sometimes. However it works like a charm in Firefox. To fix this issue we have to calculate the difference of scrollbars width and adjust the width of textarea accordingly:

var area = $('#myarea').get(0);
var $area = $('#myarea');

//save the initial height of textarea
var initialHeight = area.style.height;

var scrollbarWidthInitial = area.offsetWidth - area.clientWidth;

//set the height to 0 so scrollHeight will always return dynamic height
area.style.height = '0px';

var scrollbarWidth = area.offsetWidth - area.clientWidth;
var scrollbarWidthDiff = scrollbarWidth - scrollbarWidthInitial;
$area.width($area.width() + scrollbarWidthDiff);

//here we assume that the line-height equals to 15
var numberOfRows = Math.floor(area.scrollHeight / 15);

//restore textarea height
area.style.height = initialHeight;
$area.width($area.width() - scrollbarWidthDiff);

console.log(numberOfRows);

updated example http://jsfiddle.net/J5UpF/3/

UPDATE 2

A new awesome bug in Chrome is discovered! When using placeholder attribute Chrome calculates the number of rows for placeholder text. The workaround is simple: just backup the placeholder attribute when you entered some data into textarea and restore it when data is cleared.

Updated example http://jsfiddle.net/J5UpF/4/

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>