Neue Zeile im Textbereich

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

Ich habe beide ausprobiert, aber beim Rendern der HTML-Datei wird keine neue Zeile angezeigt. Wie kann ich das machen?

discky
quelle

Antworten:

523

Probier diese:

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

&#10;Zeilenvorschub und &#13;Wagenrücklauf sind HTML-Entitäten in Wikipedia . Auf diese Weise analysieren Sie die neue Zeile ("\ n"), anstatt sie als Text anzuzeigen.

Bakudan
quelle
2
@ LittleAlien jsfiddle.net/v0y3xvpx/1 - Antwort basierend auf der OP-Frage, offensichtlich wurde das Problem gelöst
Bakudan
2
ist nicht gerade &#10;genug, um das zu analysieren \n?
Doug
Hängt es nicht von Windows oder MacOS ab, ob sowohl die Zeilenvorschub- als auch die Wagenrücklaufzeichen benötigt oder sogar richtig analysiert werden?
SeizeTheDay
1
@SeizeTheDay ja, aber es ist nicht MacOS - es ist Linux / BSD vs Windows
Bakudan
@ Bakudan Oh! Ich dachte, dass MacOS, das auf Unix basiert, dieses Problem immer noch haben würde. Aber Sie haben sicher Recht, der Unterschied ist allgemeiner.
SeizeTheDay
27

Ich fand String.fromCharCode(13, 10)hilfreich bei der Verwendung von View Engines. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Dadurch wird eine Zeichenfolge mit den tatsächlichen Zeilenumbruchzeichen erstellt, und die Ansichts-Engine wird gezwungen, eine neue Zeile anstelle einer maskierten Version auszugeben. Beispiel: Verwenden der NodeJS EJS-Ansichts-Engine - Dies ist ein einfaches Beispiel, in dem alle \ n ersetzt werden sollten:

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>

Rendern

<textarea>Blah
blah
blah</textarea>

alles ersetzen:

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;
};
Daniel Flippance
quelle
1
Die neue Zeile = String.fromCharCode (13, 10); ist das einzige, was für mich beim programmgesteuerten Hinzufügen einer neuen Zeile zur Laufzeit funktioniert hat. +1 darauf.
Ronen Rabinovici
3
Ich möchte vielleicht einen einfacheren Weg vorschlagen, um alle zu ersetzen: var regExp = new RegExp (find, "gi"); str = str.replace (regExp, replace);
Ronen Rabinovici
2
Ich habe es getan s = s.replace(/\\n/g, String.fromCharCode(13, 10) ). Das ist allerdings Magie. Danke dir.
Glycerin
27
<textarea cols='60' rows='8'>This is my statement one.

This is my statement2</textarea>

Geige zeigt, dass es funktioniert: http://jsfiddle.net/trott/5vu28/ .

Wenn Sie wirklich möchten, dass dies in einer einzelnen Zeile in der Quelldatei steht, können Sie die HTML-Zeichenreferenzen für einen Zeilenvorschub und einen Wagenrücklauf einfügen, wie in der Antwort von @Bakudan gezeigt:

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

Trott
quelle
21

Ich denke, Sie verwirren die Syntax verschiedener Sprachen.

  • &#10;ist (der HtmlEncoded-Wert von ASCII 10 oder) das Zeilenvorschubzeichenliteral in einer HTML- Zeichenfolge. Das Zeilenvorschubzeichen wird jedoch NICHT als Zeilenumbruch in HTML gerendert (siehe Hinweise unten).

  • \nist das Zeilenvorschubzeichenliteral (ASCII 10) in einer Javascript- Zeichenfolge.

  • <br/>ist ein Zeilenumbruch in HTML. Viele andere Elemente, zB <p>, <div>usw. machen auch Zeilenumbrüche , es sei denn mit einigen Arten außer Kraft gesetzt.

Hoffentlich wird die folgende Abbildung es klarer machen:

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>

Einige Punkte zu HTML:

  • Der innerHTMLWert des TEXTAREAElements rendert kein HTML. Versuchen Sie Folgendes: um <textarea>A <a href='x'>link</a>.</textarea>zu sehen.
  • Das PElement rendert alle zusammenhängenden Leerzeichen (einschließlich neuer Linien) als ein Leerzeichen.
  • Das LF-Zeichen wird in HTML nicht in eine neue Zeile oder einen neuen Zeilenumbruch gerendert.
  • Das TEXTAREArendert LF als neue Zeile im Textbereich.
Alte Knacker
quelle
1
Auf den ersten Blick scheint dieser Beitrag kompliziert zu sein, enthält aber tatsächlich eine Menge nützlicher Informationen. Wenn Sie progamatisch Zeilen zu Ihrem hinzufügen, ist <textarea/>dies der Beitrag, den Sie benötigen!
Morvael
<br/>ist das, wonach ich gesucht habe
Johnny Five
14

Unterbrechen Sie die Eingabe der Keyword-Zeile im Textbereich mithilfe von CSS:

white-space: pre-wrap;
Suraj Kumar Maurya
quelle
1
Dies sollte höher sein
Rodney Salcedo
Es ist die einfachste Methode, um das gewünschte Ergebnis zu erzielen, danke @Suraj
Moaz Ateeq
Dies ist die Antwort
am
7

versuchen Sie dies .. es funktioniert:

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

Ersetzen von
Tags:

$("textarea#test").val(replace($("textarea#test").val(), "<br>", "&#10;")));
Salz Hareket
quelle
3
es ist tatsächlich $ ("textarea # test"). val (). replace (/ \ n / g, "& # 10;"); (Dies wird alle Vorkommen der neuen Linie ersetzen)
Claudiu
7

Um eine neue Zeile im Textbereich zu erhalten, setzen Sie dort einen tatsächlichen Zeilenumbruch:

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

Jukka K. Korpela
quelle
5

Vielleicht möchten Sie \nstatt verwenden /n.

Zar
quelle
5
Nun, ein Literal \nwird auch nicht funktionieren, es müsste eine echte Newline sein.
Greg Hewgill
Ja natürlich. Aber ich gehe (fälschlicherweise?) Davon aus, dass er das bereits wusste.
Zar
2

Nach vielen Tests funktioniert der folgende Code für mich 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);
}
Harry Sarshogh
quelle
0

Meine .replace()Funktion mit den in den anderen Antworten beschriebenen Mustern hat nicht funktioniert. Das Muster, das für meinen Fall funktionierte, war:

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"
Brunno Vodola Martins
quelle
0

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

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

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

<p id='p3'></p>
Naresh Kumar
quelle
Während dieser Code die Frage möglicherweise beantwortet, verbessert die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie dieser Code die Frage beantwortet, ihren langfristigen Wert.
Alex Riabov
-5

benutze einfach <br>
ex:

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

Ergebnis:
blablablabla
kakakakakak
fafafafafaf

Lechani Houssam
quelle