HTML metin alanına satır sonları nasıl eklenir?

<textarea>JavaScript ile bir düzenleme yapıyorum . Sorun şu ki, satır sonları yaptığımda görüntülenmeyecekler. Bunu nasıl yapabilirim?

Bir işlev yazmak için değer alıyorum, ancak satır sonları vermeyecektir.

Sorun, satır sonlarının ( \n\r?) HTML <br/>etiketleriyle aynı olmaması gerçeğinden kaynaklanmaktadır

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

GÜNCELLEME

Yorumların çoğu ve kendi deneyimim bana bu <br> çözümün beklendiği gibi çalışmadığını gösterdiğinden, textarea'\ r \ n' kullanarak yeni bir satırın nasıl ekleneceğine bir örnek.

function log(text) {
    var txtArea ;

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

Bunu bir düzenleme yapmaya karar verdim, yeni bir soru olarak değil, çünkü bu yanlış veya eksik olmak için çok popüler bir cevap.

genel java komut dosyası kullanıyorsanız ve metin alanı değerine dize atamanız gerekiyorsa

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

değiştirmeniz \nveya değiştirmeniz < br >gerekiyor\\\n

aksi takdirde Uncaught SyntaxError: Unexpected token ILLEGALtüm tarayıcılarda verir .

Belki birisi bunu yararlı bulur:

Sunucu değişkeni javascript değişkenine geçirilen satır sonları ile ilgili sorun vardı ve sonra javascript (knockout.js değer bağlamaları kullanarak) textarea onları yazıyordu.

çözüm yeni satırlardan kaçmaktı:

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

sadece tek kaçış karakterleri ile javascript ayrıştırma değildi çünkü sunucu tarafında.

Sen kullanmak gerekir \niçin linebreaksiçeridentextarea

Kendi sayfanızın içinde metin görüntülemek istiyorsanız, <pre>etiketi kullanabilirsiniz .

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>

Yeni bir satır yalnızca tarayıcının boşluğudur ve normal alandan ("") farklı bir şekilde ele alınmaz. Yeni bir satır almak için <BR />eleman eklemeniz gerekir .

Sorunu çözmek için başka bir girişim: Metni metin alanına yazın ve ardından görünmez karakterleri okunabilir bir şeye dönüştürmek ve sonucu a DIV. Bu size tarayıcınızın ne istediğini söyleyecektir.

Ben #infoartist kimliği olan bir textarea var takip:

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

Javascript kodunda, textarea değerini alır ve kaçan yeni satır (\ n \ r) <br />etikete göre değiştiririm :

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

Yani jquery kullanıyorsanız (benim gibi):

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

Umarım yardımcı olmuştur. :-)

Sadece satır sonları ile sunucuya testarea değerini göndermeniz gerekiyorsa kullanmak nl2br

İşte yaşadığım aynı sorun için yaptığım şey.

metni jsp'deki sonraki sayfaya geçirdiğimde, metin gibi okumak yerine

böylece çıktı istediğiniz gibi geldi. ve diğer özellikler için aşağıdaki gibi kullanabilirsiniz.

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