How to add a new line in textarea element? - html

Question

I want to add a newline in a textarea. I tried with \n and <br/> tag but are not working. You can see above the HTML code. Can you help me to insert a newline in a textarea?
<textarea cols='60' rows='8'>This is my statement one.\n This is my statement2</textarea>
<textarea cols='60' rows='8'>This is my statement one.<br/> This is my statement2</textarea>

Answer 1

Try this one:
<textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>
Line Feed and 
 Carriage Return are HTML entitieswikipedia. This way you are actually parsing the new line ("\n") rather than displaying it as text.

Answer 2

Break enter Keyword line in Textarea using CSS:
white-space: pre-wrap;

Answer 3

I think you are confusing the syntax of different languages.
is (the HtmlEncoded value of ASCII 10 or) the linefeed character literal in a HTML string. But the line feed character does NOT render as a line break in HTML (see notes at bottom).
\n is the linefeed character literal (ASCII 10) in a Javascript string.
<br/> is a line break in HTML. Many other elements, eg <p>, <div>, etc also render line breaks unless overridden with some styles.
Hopefully the following illustration will make it clearer:
T.innerText = "Position of LF: " + t.value.indexOf("\n");
p1.innerHTML = t.value;
p2.innerHTML = t.value.replace("\n", "<br/>");
p3.innerText = t.value.replace("\n", "<br/>");
<textarea id="t">Line 1
Line 2</textarea>
<p id='T'></p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>
A few points to note about Html:
The innerHTML value of the TEXTAREA element does not render Html. Try the following: <textarea>A <a href='x'>link</a>.</textarea> to see.
The P element renders all contiguous white spaces (including new lines) as one space.
The LF character does not render to a new line or line break in HTML.
The TEXTAREA renders LF as a new line inside the text area box.

Answer 4

I've found String.fromCharCode(13, 10) helpful when using view engines.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode
This creates a string with the actual newline characters in it and so forces the view engine to output a newline rather than an escaped version. Eg: Using NodeJS EJS view engine - This is a simple example in which any \n should be replaced:
viewHelper.js
exports.replaceNewline = function(input) {
var newline = String.fromCharCode(13, 10);
return input.replaceAll('\\n', newline);
}
EJS
<textarea><%- viewHelper.replaceNewline("Blah\nblah\nblah") %></textarea>
Renders
<textarea>Blah
blah
blah</textarea>
replaceAll:
String.prototype.replaceAll = function (find, replace) {
var result = this;
do {
var split = result.split(find);
result = split.join(replace);
} while (split.length > 1);
return result;
};

Answer 5

<textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>
Fiddle showing that it works: http://jsfiddle.net/trott/5vu28/.
If you really want this to be on a single line in the source file, you could insert the HTML character references for a line feed and a carriage return as shown in the answer from #Bakudan:
<textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>

Answer 6

Try this. It works:
<textarea id="test" cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>
Replacing for <br> tags:
$("textarea#test").val(replace($("textarea#test").val(), "<br>", "
")));

Answer 7

To get a new line inside text-area, put an actual line-break there:
<textarea cols='60' rows='8'>This is my statement one.
This is my statement2</textarea>

Answer 8

You might want to use \n instead of /n.

Answer 9

After lots of tests, following code works for me in Typescreipt
export function ReplaceNewline(input: string) {
var newline = String.fromCharCode(13, 10);
return ReplaceAll(input, "<br>", newline.toString());
}
export function ReplaceAll(str, find, replace) {
return str.replace(new RegExp(find, 'g'), replace);
}

Answer 10

You should also check the css white-space property (mdn docs) of your element, make sure it's set to a value that doesn't suppress line breaks, e.g.:
white-space: pre-line;
You'd be interested in these 3 values:
pre
Sequences of white space are preserved. Lines are only broken at
newline characters in the source and at <br> elements.
pre-wrap
Sequences of white space are preserved. Lines are broken at
newline characters, at <br>, and as necessary to fill line boxes.
pre-line Sequences of white space are collapsed. Lines are broken at
newline characters, at <br>, and as necessary to fill line boxes.

Answer 11

My .replace()function using the patterns described on the other answers did not work. The pattern that worked for my case was:
var str = "Test\n\n\Test\n\Test";
str.replace(/\r\n|\r|\n/g,'
');
// str: "Test
Test
Test"

Answer 12

T.innerText = "Position of LF: " + t.value.indexOf("\n");
p3.innerText = t.value.replace("\n", "");
<textarea id="t">Line 1
Line 2</textarea>
<p id='p3'></p>

Answer 13

If you are using react
Inside the function
const handleChange=(e)=>{
const name = e.target.name;
let value = e.target.value;
value = value.split('\n').map(str => <span>{str}<br/></span>);
SetFileds({ ...fileds, [name]: value });
}

Answer 14

A simple and natural solution not involving CSS styles or numeric character references like
would be to use the 
 character entity reference:
The cardinal directions are:
- North
- East
- South
- West
Note: Since this is defined simply as the LF (line feed, or the U+000A Unicode code point) character, it's not 100% certain whether it suits situations where the entire CR + LF (carriage return + line feed) sequence is required. But then, it worked in my Chrome, Edge and WebView2 tests done on Windows 10, so it should be ok to use.

Answer 15

just use <br>
ex:
<textarea>
blablablabla <br> kakakakakak <br> fafafafafaf
</textarea>
result:
blablablabla kakakakakak fafafafafaf