CODEWITHSUNDEEP
htmlcss
David
David

Reputation: 13999

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

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>

Upvotes: 48

Views: 62717

Answers (6)

naikus
naikus

Reputation: 24472

I don't think its possible to do that with a textarea and html alone. What you need is a Rich Text box You can either roll your own by modifying an iframe, or use the popular ones available

Other option you can have when you target html5 enabled browsers is the contentEditable attribute. You can use it to make a textbox-like control

Upvotes: 9

Cannicide
Cannicide

Reputation: 4520

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>

Upvotes: 42

Sinan
Sinan

Reputation: 11563

That's not possible with current w3c specs. If you're looking for a workaround, check codemirror or editArea for their workarounds for syntax highlighting.

Upvotes: 2

Pavel Morshenyuk
Pavel Morshenyuk

Reputation: 11471

You can't do this with default html controls. You can use Rich Text Box editors to get what you want, for example check this question:

What is the best rich textarea editor for jQuery?

Upvotes: 1

Pekka
Pekka

Reputation: 449385

This is not possible in a normal textarea.

  • For syntax highlighting-like approaches, see the answers to this question.

  • For a more complicated, full-fledged WYSIWYG solution that can do colours as well as other formatting, images, etc., see a WYSIWYG editor like CKEditor.

Upvotes: 4

Nick Craver
Nick Craver

Reputation: 630339

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:

Upvotes: 17

Related Questions