HTML textarea bỏ qua ký tự dòng 1 mới, tại sao?

Question

Ông có thể giải thích tại sao điều này:

<script type="text/javascript"> 
    document.write("<textarea cols='10' rows='10'>" + "\nhello\nbabe\n" + "</textarea>"); 
</script> 

ám một textarea với một dòng sản phẩm mới ở phía dưới, nhưng NO dòng mới ở trên cùng?

Tested IE8, FF11, Safari 5.1, Chrome 24

Và nó không phải là một vấn đề JS, ngay cả khi bạn viết HTML trong trang web mà bạn có được kết quả tương tự, tức là

<textarea cols='10' rows='10'> 
hello 
babe 
</textarea> 

Dòng đầu tiên mới vẫn bị thiếu!

tôi cần phải thêm một dòng mới ở phía trên để hiển thị một:

document.write("<textarea cols='10' rows='10'>" + "\n\nhello\nbabe\n" + "</textarea>"); 

Answer 1

Thêm một khoảng trắng trước khi là người đầu tiên "\ n" như thế này:

<script type="text/javascript"> 
    document.write("<textarea cols='10' rows='10'>" + " \nhello\nbabe\n" + "</textarea>"); 
</script> 

hoặc

<textarea cols='10' rows='10'> <!-- whitespace here --> 
hello 
babe 
</textarea> 

nếu không nó sẽ không hoạt động.

---

Cập nhật: Sau đó trong phía máy chủ, bạn có thể loại bỏ các khoảng trắng đầu tiên bằng cách làm

$str = ltrim ($str,' '); 

hoặc

$str2 = substr($str, 4); 

nếu nó là PHP.

Answer 2

Khi viết bên trong XHTML, hãy sử dụng các thực thể thích hợp.

<textarea>&#13;hello</textarea> 

Nếu nút văn bản bắt đầu bằng khoảng trắng (khoảng trống, dòng mới), nó sẽ bị trình phân tích cú pháp HTML bỏ qua. Việc mã hóa dòng mới thành một thực thể HTML thích hợp sẽ buộc trình phân tích cú pháp xác nhận nó.


 == carriage return 

Answer 3

Nếu có thể, thay đổi mã của bạn để có textarea được xác định trước như html, sau đó viết chuỗi như thay vì điều này:

HTML:

<textarea cols='10' rows='10' id='test'></textarea> 

Script:

document.getElementById('test').innerHTML = '\nhello\nbabe\n'; 

Điều đó sẽ giữ được khoảng trắng.Tùy chọn bạn có thể thêm một quy tắc css:

textarea { 
    white-space:pre; 
    } 

Một fiddle để chơi với:
http://jsfiddle.net/RFLwH/1/

Cập nhật:

OP thử nghiệm trong IE8 mà điều này không hoạt động - nó xuất hiện như một giới hạn/lỗi với trình duyệt này. IE8 thực sự sử dụng CR + LF nếu bạn tự chèn một dòng cấp dữ liệu ở đầu trang, nhưng khi thiết lập chương trình này hoàn toàn bị bỏ qua bởi trình duyệt.

Thêm phần này vào html để làm một bài kiểm tra:

<span onclick="this.innerHTML = escape(document.getElementById('test').innerHTML);"> 
    Get textarea content 
</span> 

Bạn có thể xem chuỗi trả lại là:

%0D%0Ahello%20babe%20 

nghĩa là CR + LF là có (dòng-thức ăn khác được chuyển đổi thành không gian - nhưng việc chèn dấu cách ở đầu cũng không giúp được). Tôi đoán không có gì bạn có thể làm về hành vi này; trình duyệt đã lỗi thời (nhưng tiếc là vẫn được sử dụng rộng rãi nên đây có thể là vấn đề đối với những người dùng đó nếu điều này là cần thiết).

Answer 4

Cuối cùng tôi đã hoàn thành với điều này giải pháp server-side:

tăng gấp đôi hàng đầu (chỉ đầu tiên!) Biểu tượng nl trước khi đầu ra nó trong textarea:

if(str_startswith("\r\n",$value)) 
{ 
    $value = "\r\n".$value;    
}elseif(str_startswith("\n",$value)) 
{ 
    $value = "\n".$value; 
}elseif(str_startswith("\r",$value)) 
{ 
    $value = "\r".$value; 
} 

function str_startswith($start, $string) 
{ 
    if(mb_strlen($start)>mb_strlen($string)) 
    return FALSE; 
    return (mb_substr($string, 0,mb_strlen($start))==$start); 
} 

Answer 5

Nó phải là một \n\r ở đầu trang: document.write("<textarea cols='10' rows='10'>" + "\n\rhello\nbabe\n" + "</textarea>");

jsbin