New line in text area

问题:

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

I tried both but new line is not reflecting while rendering the html file. How can I do that?

回答1:

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.

回答2:

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

回答3:

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

回答4:

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.

回答5:

try this.. it works:

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

replacing for
tags:

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

回答6:

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>

回答7:

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

回答8:

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

回答9:

If you are talking about using the value of the textarea somewhere else on your page and rendering the newlines, I found the css propperty white-space: pre-wrap; to work very well, and it\'s a simple solution. Maybe this helps someone.

回答10:

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\"

回答11:

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>

回答12:

just use <br>
ex:

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

result:
blablablabla
kakakakakak
fafafafafaf