Dòng mới trong vùng văn bản

Question

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

Tôi đã thử cả hai nhưng dòng mới không phản ánh trong khi hiển thị tệp html. Tôi có thể làm như thế nào?

Answer 1

Hãy thử điều này một:

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


 Dòng Thức ăn và 
 vận chuyển trở lại là HTML entities^wikipedia. Bằng cách này, bạn đang thực sự phân tích cú pháp dòng mới ("\ n") thay vì hiển thị nó dưới dạng văn bản.

Answer 2

Bạn có thể muốn sử dụng \n thay vì /n.

Answer 3

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

This is my statement2</textarea> 

Fiddle cho biết nó hoạt động: http://jsfiddle.net/trott/5vu28/.

Nếu bạn thực sự muốn điều này phải được trên một dòng trong tập tin nguồn, bạn có thể chèn các tài liệu tham khảo nhân vật HTML cho một thức ăn đường và trở về vận chuyển như thể hiện trong các câu trả lời từ @Bakudan:

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

Answer 4

thử này .. nó hoạt động:

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

thay thế cho
tags:

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

Answer 5

Để có được một dòng mới bên trong textarea, chấm linebreak thực tế đó:

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

Answer 6

tôi đã tìm thấy String.fromCharCode(13, 10) hữu ích khi sử dụng công cụ xem. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Điều này tạo chuỗi có ký tự dòng mới thực sự trong đó và do đó buộc công cụ xem xuất ra dòng mới chứ không phải phiên bản thoát. Ví dụ: Sử dụng công cụ xem NodeJS EJS - Đây là một ví dụ đơn giản, trong đó bất kỳ \ n nên được thay thế:

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> 

Renders

<textarea>Blah 
blah 
blah</textarea> 

---

replaceAll:

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

Answer 7

Sau nhiều thử nghiệm, sau đang làm việc cho tôi trong 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); 
} 

Answer 8

Tôi nghĩ rằng bạn đang bối rối cú pháp của ngôn ngữ khác nhau.

• 
 là (giá trị HtmlEncoded của ASCII 10 hoặc) nhân vật linefeed chữ trong một HTML chuỗi. Nó NOT hiển thị dưới dạng ngắt dòng trong HTML (xem ghi chú ở dưới cùng).

• \n là ký tự cấp dòng chữ (ASCII 10) trong một chuỗi Javascript.

• <br/> là ngắt dòng trong HTML. Nhiều yếu tố khác, ví dụ: <p>, <div>, v.v. cũng hiển thị ngắt dòng trừ khi được ghi đè bằng một số kiểu.

Hy vọng rằng sau illustration sẽ làm cho nó rõ ràng hơn:

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>

Một vài điểm cần lưu ý về Html:

• Các VALUE thuộc tính của phần tử TEXTAREA không làm hiển thị Html
• Phần tử P hiển thị tất cả các khoảng trắng liền kề (bao gồm cả các dòng mới) dưới dạng một dấu cách.
• Ký tự LF không hiển thị dòng mới hoặc ngắt dòng trong HTML.
• TEXTAREA hiển thị LF là một dòng mới.

Answer 9

Nếu bạn đang nói về việc sử dụng giá trị của vùng văn bản ở một nơi khác trên trang của bạn và hiển thị dòng mới, tôi đã tìm thấy css propperty không gian trắng: được bọc trước; hoạt động rất tốt và đó là giải pháp đơn giản. Có lẽ điều này giúp một ai đó.

Answer 10

Chức năng .replace() của tôi bằng các mẫu được mô tả trên các câu trả lời khác không hoạt động. Mẫu làm việc cho trường hợp của tôi là:

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

// str: "Test

Test
Test"