Wie füge ich eine neue Zeile in ein Textarea-Element ein?

Question

Ich möchte einen Zeilenumbruch in einem Textfeld hinzufügen. Ich habe versucht mit \n y <br/> Tag, aber sie funktionieren nicht. Sie können oben den HTML-Code sehen. Können Sie mir helfen, einen Zeilenumbruch in ein Textfeld einzufügen?

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

Answer 1

Versuchen Sie dies:

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


 Zeilenvorschub und 
 Wagenrücklauf sind HTML-Entitäten wikipedia . Auf diese Weise wird die neue Zeile tatsächlich analysiert (" \n "), anstatt sie als Text anzuzeigen.

Answer 2

Unterbrechen Sie die Eingabe von Schlüsselwörtern in Textareas mit CSS:

white-space: pre-wrap;

Answer 3

Ich glaube, Sie verwechseln die Syntax der verschiedenen Sprachen.

• 
 ist (der HtmlEncoded-Wert von ASCII 10 oder) das Zeilenvorschub-Zeichenliteral in einer HTML Zeichenfolge. Aber das Zeilenvorschubzeichen macht NICHT wird in HTML als Zeilenumbruch dargestellt (siehe Anmerkungen unten).

• \n ist das Zeilenvorschubzeichen (ASCII 10) in einer Javascript String.

• <br/> ist ein Zeilenumbruch in HTML. Viele andere Elemente, z.B. <p> , <div> usw. machen auch Zeilenumbrüche, es sei denn, sie werden durch bestimmte Stile überschrieben.

Hoffentlich die folgenden Abbildung wird 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>

Ein paar Punkte zu Html:

• Les innerHTML Wert des TEXTAREA Element kann Html nicht darstellen. Versuchen Sie das Folgende: <textarea>A <a href='x'>link</a>.</textarea> zu sehen.
• Les P Element werden alle zusammenhängenden Leerzeichen (einschließlich neuer Zeilen) als ein Leerzeichen dargestellt.
• Das Zeichen LF wird in HTML nicht als neue Zeile oder Zeilenumbruch dargestellt.
• Les TEXTAREA rendert LF als neue Zeile innerhalb des Textfeldes.

Answer 4

Ich habe gefunden 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

Dies erzeugt eine Zeichenkette mit den tatsächlichen Zeilenumbrüchen und zwingt so die View-Engine, einen Zeilenumbruch auszugeben und nicht eine escapte Version. Beispiel: Verwendung der NodeJS EJS View Engine - Dies ist ein einfaches Beispiel, in dem jede \n sollte ersetzt werden:

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>

Rendert

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

Answer 5

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

This is my statement2</textarea>

Tüfteln Sie, dass es funktioniert: http://jsfiddle.net/trott/5vu28/ .

Wenn Sie wirklich wollen, dass dies in einer einzigen Zeile in der Quelldatei geschieht, 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>