Textareas are great because of some built in functionality (scrollbars). How can I format <spans> of text inside of the <textarea>?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
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());
});Method 2
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.
Method 3
You cannot use HTML inside TEXTAREA.
Scrolling can be applied to any element by adding overflow: auto and fixed width and/or height.
Method 4
You can user html editors for web like CKEditor to be able to format the data in text area. Check this http://ckeditor.com/
Method 5
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>All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0