How to add a new line in the textarea element?

Understanding the newline character in HTML

To insert newlines in <textarea> directly in your markup, use HTML entities 
 (Carriage Return) and 
 (Line Feed). For superior compatibility across platforms, employ the combination 
.

<textarea>First line&#13;&#10;Second line</textarea> // It's not the Matrix, it's a newline!


CSS styling for newline preservation

Reserved spaces in textarea including newlines can be taken care of by CSS. Whip out the white-space property with the pre-wrap value to maintain those precious spaces and newline characters:

textarea {
  white-space: pre-wrap; // because, why would you want your text to not-wrap?!
}


Note, <br/> tags do not function within textarea elements. Stick to using \n and 
 or 
 to create newlines.

Platform-specific newline handling

Different platforms treat newline characters differently. Unix systems use \n, while Windows uses \r\n. When manipulating textarea content via JavaScript, use String.fromCharCode(13, 10) to ensure a platform-agnostic newline:

let newline = String.fromCharCode(13, 10); // Platform equality for the win!


Textarea alternatives

For static multiline text utilizing whitespace as-is, consider using the <pre> HTML element. It can be a suitable alternative for a textarea when user input is not necessary.

JavaScript tricks: replacing and splitting

In JavaScript, you might want to replace new lines with other characters, or split text by new lines. Here, String.prototype.replaceAll and String.prototype.split are your trusty sidekicks:

let paragraph = "Line 1\nLine 2\nLine 3";
let singleLine = paragraph.replaceAll("\n", " "); // New lines? We don't need those here!
let lines = paragraph.split("\n"); // Now you have an array of lines. Enjoy!


Do some testing, folks!

If newline insertions do not work as expected, validate your HTML to uncover syntax errors. Also, testing across different browsers is recommended to ensure consistent newline representation.

HTML entity encoding

Are you wondering why the combination of 
? This duo is known for creating robust new lines in XHTML, ensuring your content looks sharp across browsers and platforms.

Some things JavaScript just can't do

Remember, assigning innerHTML on a textarea doesn't quite hit the mark. This property does not interpret HTML within the textarea, including <br/>. Stay on track by modifying the value property:

// Best to avoid this - there are no new lines here!
document.getElementById('myTextarea').innerHTML = "Line 1<br/>Line 2";

// Much better - welcome back, new lines!
document.getElementById('myTextarea').value = "Line 1\nLine 2";


Size matters not when handling new lines

Remember, rows and columns in a textarea define its size, not its newline handling. These dimensions have zero impact on newline representation!