HTML textarea ignores the first new line character, why?

Question

Could you explain why this is:

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

displays a text box with one new line at the bottom, but there is NO new line at the top ?

Tested IE8, FF11, Safari 5.1, Chrome 24

And this is not a JS problem, even when you write HTML on the page, you get the same result, i.e.

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

The first new line is still missing.

I need to add another new line at the top to show it:

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

Answer 1

When writing inside XHTML, use the correct objects.

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

If the node text begins with a space (space, new line), it will be ignored by HTML parsers. Encoding a newline into the proper HTML entity causes the parser to recognize it.

 
 == carriage return 

Answer 2

If possible, modify your code to have a text field previously defined as html, then write the line instead:

HTML:

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

Script:

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

This should save empty space. If you wish, you can add a css rule:

 textarea { white-space:pre; } 

Violin to play with:
http://jsfiddle.net/RFLwH/1/

Update:

The OP is tested in IE8, which does not work - it seems to be a limitation / error in this browser. IE8 really uses CR + LF if you manually insert a line at the top of the page, but when installing the software this is completely ignored by the browser.

Add this to html to run the test:

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

You can see the returned string:

  %0D%0Ahello%20babe%20 

means that CR + LF is (other lines of lines are converted to spaces, but inserting space at the beginning does not help either). I think you can do nothing about this behavior; the browser is outdated (but, unfortunately, it is still widely used, so this can be a problem for those users, if necessary).

Answer 3

Add a space before the first "\ n" as follows:

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

or

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

otherwise it will not work.

---

Update: Later on the server side, you can remove the first space by doing

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

or

 $str2 = substr($str, 4); 

if it's php.

Answer 4

It should be \n\r at the top: document.write("<textarea cols='10' rows='10'>" + "\n\rhello\nbabe\n" + "</textarea>");

jsbin

Answer 5

Finally, I ended this server side solution:

to double the character (only the first!) nl before displaying it in 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); }