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?

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.


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

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>


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.

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;

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

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>


5

Vielleicht möchten Sie \nstatt verwenden /n.


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

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"

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>

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.