How do I have different font colors in a textarea?

Question

I want the font color to change in a textarea as I type in specific keywords, like in Visual Studio.

I have not seen this anywhere, so I don\'t know if this is possible

Answer 1

Textarea is a standard HTML element and so was invented just after the dawn of time. Unfortunately this means it is limited in it's appearance and functionality.

Changing the colours of specific words is not possible as far as I know. However a way to get around this would be to have an iFrame embedded in the page. That way, you can treat the iFrame content as another web page and style it using CSS.

The Yahoo RTE, the FCKEditor and the Lightweight RTE works in this way.

Another option, which does not use an iFrame is the editor used here on Stack Overflow, known as the WMD. The files are here.

Answer 2

It's not possible.

Way to go is to make textarea's font, but not cursor, transparent using color:#000;-webkit-text-fill-color:transparent, then create underlying, 100% overlapping div to which content of textarea will be copied + formatted on textarea's oninput event.

You'll need to adress (or avoid) some issues coming out of syncing these two elements, like scrolling for example, but it can be done. I made my own HTML editor this way.

AFAIK, css property -webkit-text-fil-color is supported in Opera, Chrome and should be in soon-to-be-released Firefox v.48.

Answer 3

You would probably have to run javascript on the client to detect when the text changes, then replace the text to be highlighted with some child html elements with the proper style.

For example

Original text:

This is what the user typed.

Highlighted text

This is what the <a class="className">user</a> typed.