Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to have several different textcolors in one textarea?

Tags:

html

css

I'd like several words / phases in a textarea to appear in different colors... How would I go about doing this? Below is an example, I'd like the word green to appear green etc etc...

<textarea style="width: 100%; height: 100%; resize: none;"> Is it possible to have multiple colors in a textarea?  How would i set certain phases or words to be different colors?  "Green" "Red" "Blue" </textarea> 
like image 652
David Avatar asked Aug 08 '10 16:08

David


People also ask

Can I put Div inside textarea?

You cannot place HTML elements inside a text area, only text content. only text content covers that part.

What are the two attributes of textarea?

The id attribute is required to link the text area with a label. Attribute values: autocomplete: It is used to specify whether the Textarea field has autocompleted on or off. autofocus: It is used to specify that the textarea field should get automatically focus when the page loads.

Is textarea inline or block?

<textarea> is a replaced element — it has intrinsic dimensions, like a raster image. By default, its display value is inline-block .

What is textarea Maxlength?

The maxlength attribute specifies the maximum length (in characters) of a text area.


2 Answers

You cannot do this with a textarea or input tag. However, as @naikus mentioned, you can use the contenteditable attribute. It is as follows:

<div id="mytxt" contenteditable="true">    Hello, my name is <span style="color: blue;">Bob</span>    and I have a friend name <span style="color: green;">Joe</span>. </div> 

<div id="mytxt" contenteditable="true">         Hello, my name is <span style="color: blue;">Bob</span> and I have a friend name <span style="color: green;">Joe</span>.      </div>
like image 76
Cannicide Avatar answered Sep 18 '22 02:09

Cannicide


You can't do this inside a <textarea>, not one that's editable. It sounds like you're after a WYSIWYG editor, most of which use a <iframe> to do this.

There are several JavaScript options for this, to name a few:

  • TinyMCE
  • CKEditor
like image 35
Nick Craver Avatar answered Sep 20 '22 02:09

Nick Craver