57

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

0

5 Answers 5

91

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());
});
2
  • 9
    contenteditable isn't all poines and rainbows. This article is a great readup that I wish I hade seen before trying to use contenteditable on a few of my projects: medium.com/content-uneditable/…. It seems so good, but it's terribly flawed.
    – swelet
    Commented Oct 30, 2015 at 14:18
  • "the project is either dead or full of most brutal hacks which seem to work ... The developer joins the “contentEditable is evil” club" :)
    – Avatar
    Commented Apr 13, 2022 at 5:33
12

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.

2
  • 4
    http://jsfiddle.net/XNkDx/2199/ I just added few lines to show you how this work for real. And, +1 for you my friend, nice little script
    – Aleksandar
    Commented Oct 7, 2013 at 21:00
  • ...I said that a question was a duplicate of itself. How did nobody notice?
    – Deep
    Commented Apr 23, 2015 at 18:32
4

You cannot use HTML inside TEXTAREA.

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

2

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

0

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>
2
  • 2
    I think you left something out of your answer.
    – Brigham
    Commented Feb 10, 2014 at 5:02
  • uppsss.. fixed it. Cheers!
    – Christian
    Commented Feb 10, 2014 at 5:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.