How to add a new line in textarea element?
HtmlTextareaLine BreaksHtml Problem Overview
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>
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
Break enter Keyword line in Textarea using CSS:
white-space: pre-wrap;
Solution 3 - Html
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 theTEXTAREA
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.
Solution 4 - Html
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;
};
Solution 5 - Html
<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>
Solution 6 - Html
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>", " ")));
Solution 7 - Html
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>
Solution 8 - Html
You might want to use \n
instead of /n
.
Solution 9 - Html
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);
}
Solution 10 - Html
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"
Solution 11 - Html
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>
Solution 12 - Html
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 });
}
Solution 13 - Html
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.
Solution 14 - Html
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.
Solution 15 - Html
just use <br>
ex:
<textarea>
blablablabla <br> kakakakakak <br> fafafafafaf
</textarea>
result:
blablablabla
kakakakakak
fafafafafaf