Jak dodać podziały wierszy do obszaru tekstowego HTML?

Edytuję za <textarea>pomocą JavaScript. Problem polega na tym, że kiedy robię w nim znaki końca linii, nie wyświetlają się. W jaki sposób mogę to zrobić?

Otrzymuję wartość, aby napisać funkcję, ale nie spowoduje to łamania linii.

Problem wynika z faktu, że podziały wierszy ( \n\r?) To nie to samo, co <br/>znaczniki HTML

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

AKTUALIZACJA

Ponieważ wiele komentarzy i moje własne doświadczenie pokazały mi, że to <br> rozwiązanie nie działa zgodnie z oczekiwaniami, oto przykład, jak dołączyć nowy wiersz do elementu textarea„\ r \ n”

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

Postanowiłem zrobić to edycję, a nie jako nowe pytanie, ponieważ jest to zbyt popularna odpowiedź, aby była błędna lub niekompletna.

jeśli używasz ogólnego skryptu java i musisz wtedy przypisać ciąg do wartości obszaru tekstowego

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

trzeba wymienić \nlub < br >do\\\n

w przeciwnym razie działa Uncaught SyntaxError: Unexpected token ILLEGALwe wszystkich przeglądarkach.

Może ktoś uzna to za przydatne:

Miałem problem z łamaniem linii, które były przekazywane ze zmiennej serwera do zmiennej javascript, a następnie javascript zapisywał je do textarea (używając wiązania wartości knockout.js).

rozwiązaniem była podwójna ucieczka od nowych linii:

orginal.Replace("\r\n", "\\r\\n")

po stronie serwera, ponieważ z jednym tylko znakiem zmiany znaczenia javascript nie analizował.

Musisz użyć \ndo linebreakswewnątrztextarea

Jeśli chcesz wyświetlić tekst na własnej stronie, możesz użyć <pre>tagu.

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});

<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>

Nowa linia jest po prostu białą spacją w przeglądarce i nie będzie traktowana inaczej niż zwykła spacja („”). Aby uzyskać nową linię, musisz wstawić <BR />elementy.

Kolejna próba rozwiązania problemu: wpisz tekst w obszar tekstu, a następnie dodaj trochę JavaScript za przyciskiem, aby przekonwertować niewidoczne znaki na coś czytelnego i zrzucić wynik do pliku DIV. Dzięki temu dowiesz się, czego chce Twoja przeglądarka.

Mam obszar tekstowy z identyfikatorem #infoartist follow:

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

W kodzie javascript otrzymam wartość textarea i zamieniam <br />znak ucieczki nowej linii (\ n \ r) na tag, taki jak:

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

Więc jeśli używasz jquery (tak jak ja):

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

Mam nadzieję, że ci to pomogło. :-)

Jeśli potrzebujesz tylko wysłać wartość obszaru testowego do serwera z znakami końca linii, użyj nl2br

oto rzecz, którą zrobiłem z tymi samymi problemami, które miałem.

kiedy przekazuję tekst do następnej strony w jsp, czytam go jako obszar tekstu zamiast czytać coś takiego

więc wynik przyszedł tak, jak chciałeś. a dla innych właściwości możesz użyć jak poniżej.

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>