How to add a new line in textarea element?

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> 

15 Answers

Try this one:

 <textarea cols='60' rows='8'>This is my statement one.&#13;&#10;This is my statement2</textarea>


 Line Feed and 
 Carriage Return are HTML entities^wikipedia. This way you are actually parsing the new line ("\n") rather than displaying it as text.

Break enter Keyword line in Textarea using CSS:

white-space: pre-wrap; 

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>Line 1&#10;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.

I've found String.fromCharCode(13, 10) helpful when using view engines.

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; }; 

<textarea cols='60' rows='8'>This is my statement one. This is my statement2</textarea> 

Fiddle showing that it works: .

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.&#13;&#10;This is my statement2</textarea>

Try this. It works:

<textarea cols='60' rows='8'>This is my statement one.&#10;This is my statement2</textarea> 

Replacing for <br> tags:

$("textarea#test").val(replace($("textarea#test").val(), "<br>", "&#10;"))); 

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>

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

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); } 

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" 

T.innerText = "Position of LF: " + t.value.indexOf("\n");

p3.innerText = t.value.replace("\n", ""); <textarea>Line 1&#10;Line 2</textarea> <p id='p3'></p> 

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 }); } 

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.

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.

just use <br>
ex:

<textarea> blablablabla <br> kakakakakak <br> fafafafafaf </textarea> 

result:
blablablabla
kakakakakak
fafafafafaf