Format text in a <textarea>?

CssHtmlTextarea

Css Problem Overview

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

Css Solutions

Solution 1 - Css

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());
});

Solution 2 - Css

You Can't style the content of a text area separately, you have to use <div>s, or something similar.

Do you Want Something like this:?

http://jsfiddle.net/mekwall/XNkDx/

$('.editable').each(function(){
    this.contentEditable = true;
});

This allows you to edit the content of a div, and it will still look like a textarea,

Bold will now Work.

Solution 3 - Css

You cannot use HTML inside TEXTAREA.

Scrolling can be applied to any element by adding overflow: auto and fixed width and/or height.

Solution 4 - Css

You can user html editors for web like CKEditor to be able to format the data in text area. Check this http://ckeditor.com/

Solution 5 - Css

Another way to submit the "fake" text area is including the following lines inside the form tag

<form onsubmit=" $('#fake_textarea_content').val($('#fake_textarea').html());">
</form>
Categories
Recommended Css Solutions
Recommended Html Solutions
Recommended Textarea Solutions

Previous Solution:

How to get mongo command results in to a flat file

MongodbMongodb JavaMongodb Query

Next Solution:

In Markdown, how do I start a line with a number without creating a list?

Markdown

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDon PView Question on Stackoverflow
Solution 1 - CssAlcides QueirozView Answer on Stackoverflow
Solution 2 - CssDeepView Answer on Stackoverflow
Solution 3 - CssMarat TanalinView Answer on Stackoverflow
Solution 4 - CsskaustubhView Answer on Stackoverflow
Solution 5 - CssChristianView Answer on Stackoverflow