Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Format text in a <textarea>?

Tags:

html

css

textarea

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

like image 498
Don P Avatar asked Oct 11 '12 01:10

Don P


People also ask

Can you style a textarea?

You can style text inside textarea similarly as you can do with any other HTML inputs. You can also use any CSS property like font-size , font-family , color , etc.

How do you highlight text in textarea?

You can't actually highlight text in a <textarea> . Any markup you would add to do so would simply display as plain text within the <textarea> . The good news is, with some carefully crafted CSS and JavaScript, you can fake it.

How do I wrap text in textarea in HTML?

The HTML textarea wrap Attribute is used to specify that in which manner the text is to be wrapped in a text area when a form is submitted. Attribute Values: soft: It specifies that the Text present in the Textarea would not be wrapped after submitting the form. This is the default value.


4 Answers

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()); }); 
like image 97
Alcides Queiroz Avatar answered Sep 20 '22 19:09

Alcides Queiroz


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.

like image 33
Deep Avatar answered Sep 22 '22 19:09

Deep


You cannot use HTML inside TEXTAREA.

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

like image 41
Marat Tanalin Avatar answered Sep 23 '22 19:09

Marat Tanalin


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

like image 45
kaustubh Avatar answered Sep 22 '22 19:09

kaustubh