วิธีเพิ่มตัวแบ่งบรรทัดใน HTML textarea

ฉันกำลังแก้ไข a <textarea>ด้วย JavaScript ปัญหาคือเมื่อฉันแบ่งบรรทัดในนั้นพวกเขาจะไม่แสดง ฉันจะทำสิ่งนี้ได้อย่างไร

ฉันได้รับค่าเพื่อเขียนฟังก์ชั่น แต่มันจะไม่ให้ตัวแบ่งบรรทัด

ปัญหามาจากการแบ่งบรรทัด ( \n\r?) ไม่เหมือนกับ<br/>แท็กHTML

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

UPDATE

เนื่องจากความคิดเห็นจำนวนมากและประสบการณ์ของฉันได้แสดงให้ฉันเห็นว่าการ<br> แก้ปัญหานี้ใช้งานไม่ได้ตามที่คาดไว้นี่คือตัวอย่างของการผนวกบรรทัดใหม่เข้ากับการtextareaใช้ '\ r \ n'

function log(text) {
    var txtArea ;

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

ฉันตัดสินใจที่จะแก้ไขและไม่เป็นคำถามใหม่เพราะนี่เป็นคำตอบที่ได้รับความนิยมเกินกว่าจะผิดหรือไม่สมบูรณ์

หากคุณใช้จาวาสคริปต์ทั่วไปและคุณต้องกำหนดสตริงให้กับค่าพื้นที่ข้อความ

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

คุณจะต้องแทนที่\nหรือ< br >ไป\\\n

มิฉะนั้นจะให้Uncaught SyntaxError: Unexpected token ILLEGALในเบราว์เซอร์ทั้งหมด

บางทีบางคนอาจพบว่ามีประโยชน์:

ฉันมีปัญหากับตัวแบ่งบรรทัดที่ถูกส่งผ่านจากตัวแปรเซิร์ฟเวอร์ไปยังตัวแปรจาวาสคริปต์แล้วจาวาสคริปต์ก็เขียนลงใน textarea (โดยใช้การรวมค่า knockout.js)

วิธีการแก้ปัญหาคือการหลบหนีสองบรรทัดใหม่:

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

ทางฝั่งเซิร์ฟเวอร์เพราะมีเพียงจาวาสคริปต์ escape เดียวจาวาสคริปต์ก็ไม่ได้แยก

คุณจำเป็นต้องใช้\nสำหรับlinebreaksภายในtextarea

หากคุณต้องการแสดงข้อความในหน้าของคุณเองคุณสามารถใช้<pre>แท็ก

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>

บรรทัดใหม่เป็นเพียงช่องว่างไปยังเบราว์เซอร์และจะไม่ได้รับการปฏิบัติที่แตกต่างจากพื้นที่ปกติ ("") ในการรับบรรทัดใหม่คุณต้องแทรก<BR />องค์ประกอบ

อีกหนึ่งความพยายามในการแก้ปัญหา: พิมพ์ข้อความลงใน textarea แล้วเพิ่ม JavaScript DIVเบื้องหลังปุ่มการแปลงตัวอักษรที่มองไม่เห็นบางสิ่งบางอย่างที่สามารถอ่านและการถ่ายโอนผลไปยัง นั่นจะบอกคุณว่าเบราว์เซอร์ของคุณต้องการอะไร

ฉันมี textarea พร้อม id คือ#infoartistปฏิบัติตาม:

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

ในรหัส javascript ฉันจะได้รับค่า textarea และแทนที่การหลบหนีขึ้นบรรทัดใหม่ (\ n \ r) ด้วย<br />แท็กเช่น:

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

ดังนั้นหากคุณกำลังใช้ jquery (เช่นฉัน):

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

หวังว่ามันจะช่วยคุณ :-)

หากคุณเพียงแค่ต้องส่งค่าของ testarea ไปยังเซิร์ฟเวอร์ที่มีตัวแบ่งบรรทัดใช้nl2br

นี่คือสิ่งที่ฉันทำเพื่อปัญหาเดียวกับที่ฉันมี

เมื่อฉันส่งข้อความไปยังหน้าถัดไปใน jsp ฉันกำลังอ่านมันเป็น textarea แทนที่จะอ่านสิ่งที่ชอบ

ดังนั้นเอาท์พุทมาตามที่คุณต้องการ และสำหรับคุณสมบัติอื่น ๆ คุณสามารถใช้ดังต่อไปนี้

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