Geek Answers Handbook

How do I have different font colors in the text box?

I want the font color to change in the text box when I type for certain keywords, such as in Visual Studio.

I have not seen this anywhere, so I do not know if this is possible with HTML and JavaScript.

Has anyone seen anything like this? Or do you know how to write it?

+6
html fonts colors
source share
3 answers

Textarea is a standard HTML element and was therefore invented immediately after dawn. Unfortunately, this means that it is limited in its appearance and functionality.

Changing the colors of specific words is impossible, as far as I know. However, a way around this would be to have a built-in iFrame on the page. This way you can view the contents of the iFrame as another web page and style it with CSS.

Yahoo RTE , FCKEditor, and Light RTE work this way.

Another option that does not use iFrame is the editor used here in Stack Overflow, known as WMD. Files are here .

+4
source share

It's impossible.

To make the font textarea, but not the cursor, transparent with color:#000;-webkit-text-fill-color:transparent , then create a basic 100% overlap div , the contents of which textarea will be copied + formatted into the textarea oninput event.

You will need to address (or avoid) some problems arising from the synchronization of these two elements, such as scrolling, but this can be done. I made my own HTML editor this way.

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

+1
source share

You will probably have to run javascript on the client to detect when the text changes, and then replace the text that will be highlighted by some html children with the appropriate style.

for example

Source text:

 This is what the user typed.

The selected text

 This is what the <a class="className">user</a> typed.
-4
source share

More articles:


All Articles