Format text in a <textarea>?

Don P picture Don P · Oct 11, 2012 · Viewed 97.6k times · Source

Textareas are great because of some built in functionality (scrollbars). How can I format <spans> of text inside of the <textarea>?

Answer

Alcides Queiroz Aguiar picture Alcides Queiroz Aguiar · Oct 11, 2012

If you need to customize your textarea, reproduce its behavior using another element (like a DIV) with the contenteditable attribute.

It's more customizable, and a more modern approach, textarea is just for plain text content, not for rich content.

<div id='fake_textarea' contenteditable></div>

The scrollbars can be reproduced with the CSS overflow property.

You can use this fake textarea in a form normally, i.e: if you have to submit its content through POST method, you could do something like(with jQuery):

<input type='hidden' id='fake_textarea_content' name='foobar' />

...

$('#your_form').submit(function()
{
  $('#fake_textarea_content').val($('#fake_textarea').html());
});