How to add a new line in textarea element?

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>

score 627 · Accepted Answer · edited Aug 21 '18 at 05:18

627

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.

edited Aug 21 '18 at 05:18

v8-E

1,077
2
14
21

answered Dec 25 '11 at 02:23

Bakudan

19,134
9
53
73

2

@LittleAlien https://jsfiddle.net/v0y3xvpx/1/ - answer based on the OP question, obviously problem was solved – Bakudan Sep 26 '16 at 09:33
2

isn't just ` ` enough to parse the `\n`? – Doug Apr 03 '19 at 11:33
Doesn't it depend on Windows vs. macOS whether both the line-feed and carriage-return characters are needed, or even parsed right? – AverageHelper Sep 03 '19 at 13:57
1

@SeizeTheDay yes, but it is not MacOS - it is Linux/BSD vs Windows – Bakudan Sep 03 '19 at 14:19
@Bakudan Oh! I thought macOS, being Unix-based, would still have that issue. But you’re for sure right, the difference is more general. – AverageHelper Sep 03 '19 at 14:34
You save my life...!! – JiwanJeon94 Aug 02 '23 at 08:07

score 98 · Answer 2 · answered Mar 29 '19 at 13:16

98

Break enter Keyword line in Textarea using CSS:

white-space: pre-wrap;

answered Mar 29 '19 at 13:16

Suraj Kumar Maurya

990
7
8

4

it is the simplest method to achieve the required result, thanks @Suraj – Moaz Ateeq Jan 04 '20 at 20:36
This is indeed a good solution, except if you plan to minify your HTML, you would have to preserve these newlines – Deivid As Mar 22 '22 at 16:43

score 45 · Answer 3 · edited Dec 14 '18 at 21:22

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&#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.

On the face of it this post seems complicated, but actually contains a LOT of useful information. If you are progamatically adding lines to your `` this is the post you need! — Morvael, Aug 15 '18 at 10:56

Daniel Flippance · Answer 4 · 2015-01-23T09:14:38.427

36

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

edited Jan 23 '15 at 09:14

answered Jan 23 '15 at 09:07

Daniel Flippance

7,734
5
42
55

1

The newline = String.fromCharCode(13, 10); is the only thing that worked for me in adding new line programatically during run time. +1 on that. – Ronen Rabinovici Sep 18 '15 at 05:20
3

I would like to suggest perhaps a simpler way for replace all: var regExp = new RegExp(find,"gi"); str=str.replace(regExp,replace); – Ronen Rabinovici Sep 18 '15 at 05:21
2

I did `s = s.replace(/\\n/g, String.fromCharCode(13, 10) )`. This is magic though. Thank you. – Glycerine Aug 14 '16 at 18:01

score 30 · Answer 5 · edited Aug 21 '18 at 07:58

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

score 12 · Answer 6 · edited Apr 29 '22 at 10:04

12

Try this. It works:

<textarea id="test" 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;")));

edited Apr 29 '22 at 10:04

Zoe

27,060
21
118
148

answered Dec 25 '11 at 02:18

Salt Hareket

764
7
18

4

its actually $("textarea#test").val().replace(/\n/g, " "); (this will replace all occurrences of new line) – Claudiu Dec 03 '13 at 13:58

score 7 · Answer 7 · edited Aug 21 '18 at 07:57

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>

edited Aug 21 '18 at 07:57

v8-E

1,077
2
14
21

answered Dec 25 '11 at 13:39

Jukka K. Korpela

195,524
37
270
390

score 5 · Answer 8 · answered Dec 25 '11 at 02:13

5

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

answered Dec 25 '11 at 02:13

Zar

6,786
8
54
76

5

Well, a literal `\n` won't work either, it would need to be an *actual* newline. – Greg Hewgill Dec 25 '11 at 02:14
Yes, of course. But I'm (incorrectly?) assuming that he already knew this. – Zar Dec 25 '11 at 02:16

score 2 · Answer 9 · answered Aug 17 '16 at 13:45

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

Bogdan D · Answer 10 · 2022-04-29T10:26:42.857

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.

score 0 · Answer 11 · answered Feb 27 '18 at 16:23

0

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,'&#13;&#10;');

// str: "Test&#13;&#10;&#13;&#10;Test&#13;&#10;Test"

answered Feb 27 '18 at 16:23

Brunno Vodola Martins

1,582
2
15
17

score 0 · Answer 12 · answered Jul 10 '18 at 06:54

0

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

p3.innerText = t.value.replace("\n", "");

<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='p3'></p>

answered Jul 10 '18 at 06:54

Naresh kumar

1

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Alex Riabov Jul 10 '18 at 07:16

score 0 · Answer 13 · answered May 04 '21 at 19:00

0

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

answered May 04 '21 at 19:00

Deepak Mukka

358
2
6

score 0 · Answer 14 · answered May 14 '22 at 16:05

A simple and natural solution not involving CSS styles or numeric character references like 
 would be to use the &NewLine; character entity reference:

The cardinal directions are:&NewLine;- North&NewLine;- East&NewLine;- South&NewLine;- 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.

score -12 · Answer 15 · answered Nov 05 '18 at 12:07

-12

just use <br>
ex:

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

result:
blablablabla
kakakakakak
fafafafafaf

answered Nov 05 '18 at 12:07

Lechani Houssam

1
2

How to add a new line in textarea element?

15 Answers15

Linked

Related