Baris baru di area teks

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

Saya mencoba keduanya tetapi baris baru tidak mencerminkan saat merender file html. Bagaimana saya bisa melakukan itu?

Coba yang ini:

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


Umpan Baris dan 
Pengembalian Carriage adalah entitas HTML ^wikipedia . Dengan cara ini Anda benar-benar menguraikan baris baru ("\ n") daripada menampilkannya sebagai teks.

Saya merasa String.fromCharCode(13, 10)terbantu ketika menggunakan view engine. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Ini menciptakan string dengan karakter baris baru yang sebenarnya di dalamnya dan karenanya memaksa mesin tampilan untuk menampilkan baris baru daripada versi yang lolos. Misalnya: Menggunakan mesin tampilan NodeJS EJS - Ini adalah contoh sederhana di mana \ n harus diganti:

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>

Render

<textarea>Blah
blah
blah</textarea>

menggantikan semua:

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

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

This is my statement2</textarea>

Fiddle menunjukkan bahwa ia berfungsi: http://jsfiddle.net/trott/5vu28/ .

Jika Anda benar-benar ingin ini berada pada satu baris dalam file sumber, Anda bisa memasukkan referensi karakter HTML untuk umpan baris dan carriage return seperti yang ditunjukkan dalam jawaban dari @Bakudan:

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

Saya pikir Anda mengacaukan sintaks berbagai bahasa.

• 
adalah (nilai HtmlEncoded ASCII 10 atau) literal karakter linefeed dalam string HTML . Tetapi karakter umpan baris TIDAK me-render sebagai baris istirahat dalam HTML (lihat catatan di bawah).

• \nadalah karakter karakter linefeed (ASCII 10) dalam string Javascript .

• <br/>adalah pemisah garis dalam HTML. Banyak elemen lain, misalnya <p>,, <div>dll juga membuat jeda baris kecuali diganti dengan beberapa gaya.

Semoga ilustrasi berikut ini akan membuatnya lebih jelas:

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>

Beberapa hal yang perlu diperhatikan tentang Html:

• The innerHTMLnilai dari TEXTAREAelemen tidak membuat Html. Coba yang berikut ini: <textarea>A <a href='x'>link</a>.</textarea>untuk melihat.
• The Pelemen merender semua ruang putih bersebelahan (termasuk garis baru) sebagai salah satu ruang.
• Karakter LF tidak membuat baris baru atau baris baru dalam HTML.
• The TEXTAREAmerender LF sebagai baris baru dalam kotak area teks.

Istirahatkan masukkan kata kunci baris di Textarea menggunakan CSS:

white-space: pre-wrap;

coba ini .. ini berhasil:

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

mengganti
tag:

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

Untuk mendapatkan baris baru di dalam area teks, masukkan baris-break aktual di sana:

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

Anda mungkin ingin menggunakannya \nsebagai gantinya /n.

Setelah banyak tes, kode berikut berfungsi untuk saya di 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);
}

.replace()Fungsi saya menggunakan pola yang dijelaskan pada jawaban lain tidak berfungsi. Pola yang berhasil untuk kasus saya adalah:

var str = "Test\n\n\Test\n\Test";
str.replace(/\r\n|\r|\n/g,'
');

// str: "Test

Test
Test"

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

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

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

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

cukup gunakan <br>
ex:

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

mengakibatkan:
blablablabla
kakakakakak
fafafafafaf