HTML Display line breaks within textarea

29
votes

I have asked this question now several ways, but still have not gotten an answer.

When you capture asci text in a textarea that includes line breaks, it seems to insert invisible characters in the form of line breaks when you hit return. The line break seems to have the format \r for return or \n for new line. These characters are not visible in the text but are there somewhere.

However, when I put this code in a textarea, I cannot get it to display a linebreak. In fact, I cannot find any code that placed between textarea tags displays a line break.

Can someone show a way to display line breaks in a textarea, ie. 

<textarea>first line <some code> second line </textarea>

I have really tried about everything you could possibly imagine. For example, if I try <textarea> first line "\r\n" second line</textarea> it just displays

`firstline "\r\n"` second line

Note: anything involving <br> will not solve this problem as this is not about html, but rather plain text displaying in textarea box.

Thanks for suggested code to display line breaks in textarea.

3
htmltextarealine-breaks
Is the plain text being inserted into the textarea dynamically with javascript or is it static html? – stomtech

3 Answers

35
votes

Well if you're doing this through pure HTML, then you can do it one of two ways. Just add lines by pressing enter or using the ASCII characters &#013; &#010;

jsFiddle

5
votes

If you are using javascript you can use the textarea element value Property.

var tb = document.getElementById("tb");

var newLine = "\r\n";

var text = "Output: " + newLine + "-------------------" + 
                        newLine + "line 1:	" + 
                        newLine + "line 2:	";

tb.value = text;
//console.log(text);
<textarea id="tb" rows=5>
Output: &#13;&#10;-------------
</textarea>

Run it on JSFiddle

-3
votes

I am not sure to anderstand your question.

If you want to write this in your <textarea/>

first line
second line

You should write this:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <textarea rows="4" cols="40">
first line
second line
        </textarea>
    </body>
</html>

In PHP you should write this

<html>
    <head>
        <title></title>
    </head>
    <body>
        <textarea rows="4" cols="40"><?php echo "first line\r\nsecond line" ?></textarea>
    </body>
</html>

Make sure that string is between " and not '