Làm cách nào để thêm ngắt dòng vào văn bản HTML?

Tôi đang chỉnh sửa <textarea>bằng JavaScript. Vấn đề là khi tôi thực hiện ngắt dòng trong đó, chúng sẽ không hiển thị. Tôi có thể làm cái này như thế nào?

Tôi nhận được giá trị để viết một hàm, nhưng nó sẽ không ngắt dòng.

Vấn đề xuất phát từ thực tế là ngắt dòng ( \n\r?) Không giống với <br/>thẻ HTML

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

CẬP NHẬT

Vì nhiều ý kiến ​​và kinh nghiệm của riêng tôi đã cho tôi thấy rằng <br> giải pháp này không hoạt động như mong đợi, đây là một ví dụ về cách nối một dòng mới vào textareasử dụng '\ r \ n'

function log(text) {
    var txtArea ;

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

Tôi quyết định thực hiện chỉnh sửa này, và không phải là một câu hỏi mới bởi vì đây là một câu trả lời quá phổ biến là sai hoặc không đầy đủ.

nếu bạn sử dụng tập lệnh java chung và bạn cần gán chuỗi cho giá trị vùng văn bản thì

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

bạn cần thay thế \nhoặc < br >để\\\n

nếu không, nó cung cấp cho Uncaught SyntaxError: Unexpected token ILLEGALtất cả các trình duyệt.

Có lẽ ai đó thấy điều này hữu ích:

Tôi gặp vấn đề với ngắt dòng được truyền từ biến máy chủ sang biến javascript và sau đó javascript đã viết chúng vào textarea (sử dụng các ràng buộc giá trị của knockout.js).

giải pháp là gấp đôi thoát khỏi dòng mới:

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

về phía máy chủ, bởi vì chỉ có một đoạn mã thoát, javascript không phân tích cú pháp.

Bạn cần sử dụng \ncho linebreaksbên trongtextarea

Nếu bạn muốn hiển thị văn bản trong trang của riêng bạn, bạn có thể sử dụng <pre>thẻ.

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>

Một dòng mới chỉ là khoảng trắng cho trình duyệt và sẽ không được đối xử khác với không gian bình thường (""). Để có được một dòng mới, bạn phải chèn <BR />các yếu tố.

Một nỗ lực khác để giải quyết vấn đề: Nhập văn bản vào vùng văn bản và sau đó thêm một số JavaScript phía sau nút để chuyển đổi các ký tự vô hình thành thứ gì đó có thể đọc được và chuyển kết quả sang a DIV. Điều đó sẽ cho bạn biết trình duyệt của bạn muốn gì.

Tôi có một textarea với id là #infoartist theo:

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

Trong mã javascript, tôi sẽ nhận được giá trị của textarea và thay thế thoát dòng mới (\ n \ r) bằng <br />thẻ, chẳng hạn như:

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

Vì vậy, nếu bạn đang sử dụng jquery (như tôi):

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

Hy vọng nó sẽ giúp bạn. :-)

Nếu bạn chỉ cần gửi giá trị của testarea đến máy chủ có ngắt dòng, hãy sử dụng nl2br

đây là điều tôi đã làm cho cùng một rắc rối tôi đã có.

Khi tôi chuyển văn bản đến trang tiếp theo trong jsp, tôi đang đọc nó dưới dạng văn bản thay vì đọc một cái gì đó như

Vì vậy, đầu ra đến như bạn muốn. và đối với các thuộc tính khác, bạn có thể sử dụng như dưới đây.

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