HTML textarea忽略第一個換行符，爲什麼？

Question

你能解釋一下爲什麼這樣的：

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

呈現在底部一個新行文本區域，但頂部沒有新線？

測試IE8，FF11，Safari瀏覽器5.1，Chrome的24

而且它不是一個JS的問題，甚至當你寫HTML頁面中，你得到相同的結果，即

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

第一條新線仍然缺失！

我需要在頂部，以添加其他新線來表示一個：

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

Answer 1

之前，首先添加一個空格「\ n」是這樣的：

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

或

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

否則它將無法工作。

---

更新： 在您的服務器端之後，你可以通過做

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

或

$str2 = substr($str, 4); 

如果是PHP刪除第一個空格。

Answer 2

在XHTML內部寫入時使用適當的實體。

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

如果一個文本節點以空白（空格，新行）開始，它將被HTML解析器忽略。將新行編碼到適當的HTML實體中會強制解析器確認它。


 == carriage return 

Answer 3

如果可能的話，改變你的代碼有textarea的預先定義爲HTML，那麼這樣寫不是字符串：

HTML：

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

腳本：

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

這應該保留空格。您也可以選擇添加CSS規則：

textarea { 
    white-space:pre; 
    } 

玩小提琴：
http://jsfiddle.net/RFLwH/1/

更新：

OP在IE8測試此不工作 - 這似乎是一個限制/這個瀏覽器的錯誤。如果您手動在頂部插入換行符，IE8確實會使用CR + LF，但當設置爲編程時，瀏覽器完全忽略它。

這個添加到HTML做一個試驗：

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

你可以看到返回的字符串是：

%0D%0Ahello%20babe%20 

意味着CR + LF是存在的（其他線路原料是轉換爲空格 - 但在開始處插入空格也無濟於事）。我想你對此行爲無能爲力;瀏覽器已過時（但不幸的是仍然被廣泛使用，所以如果這是必要的，這對於那些用戶來說可能是個問題）。

Answer 4

最後我完成了這個服務器端解決方案：

翻番領先（僅第一！）NL符號輸出之前在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\r： document.write("<textarea cols='10' rows='10'>" + "\n\rhello\nbabe\n" + "</textarea>");

jsbin