Changing the color of individual words in a textarea

[Fabien LE LEZ]

Hello,

I'd like to put, on a web page, a "place" where the user can type a
rather long text, with automatic coloring of each word (e.g. a color
depending on the number of letters of the word).

The only solution I could think of is rather ugly: a <textarea> for
the user to type in, and behind the <textarea>, one <span> for each
word, with the same text and font, and a colored background.
I've put it there: <http://perso.edulang.com/temp/demo.html>. (For
this demo, the color changes according to whether the number of
letters is even or odd. On this page, the background color changes,
but I'd prefer if the text color would change.)

This solution doesn't really work well: not only did I have a hard
time handling spaces (two consecutive spaces show in a <textarea>, but
are counted as only one in a regular <span>), but also, there are lots
of cases to handle (the scroller for example).

Is there a good and working solution?
Shall I program my own "extented textarea"?
Or maybe Flash would be better in that case?

Thanks a lot in advance...

 

[Randy Webb]

Fabien LE LEZ said the following on 7/10/2006 2:03 PM:

Hello,

I'd like to put, on a web page, a "place" where the user can type a
rather long text, with automatic coloring of each word (e.g. a color
depending on the number of letters of the word).
OK.

The only solution I could think of is rather ugly: a <textarea> for
the user to type in, and behind the <textarea>, one <span> for each
word, with the same text and font, and a colored background.

An IE solution is rather short and simple. Trying to get it to work,
relatively easy, in other browsers may be more difficult.

I've put it there: <http://perso.edulang.com/temp/demo.html>. (For
this demo, the color changes according to whether the number of
letters is even or odd. On this page, the background color changes,
but I'd prefer if the text color would change.)

You can simply change .color instead of .backgroundColor

This solution doesn't really work well: not only did I have a hard
time handling spaces (two consecutive spaces show in a <textarea>, but
are counted as only one in a regular <span>), but also, there are lots
of cases to handle (the scroller for example).

Very true.

Is there a good and working solution?
Shall I program my own "extented textarea"?
Or maybe Flash would be better in that case?

Flash would definitely be more cross-browser friendly.

This is IE only code and may be easily modified for other browsers but I
am not sure. It has an issue with hard returns (enter key) where it
removes them but other than that it colors the words according to
length. If the length exceeds the color array, it uses the last entry in
the colors array.

It is undocumented. It's the results of about an hour of my afternoon so
if you have questions, ask.

<URL: http://members.aol.com/_ht_a/hikksnotathome/coloredWords.html >

It could be modified to work where it changed the colors as you type,
but I found that rather annoying and hard on my eyes.

Enjoy.

 

[Fabien LE LEZ]

You can simply change .color instead of .backgroundColor

Nope. Since Javascript is rather slow, the textarea's text needs to
show (I can't just let it be transparent), so the "background span"'s
text color won't be visible, since it's behind.

<URL: http://members.aol.com/_ht_a/hikksnotathome/coloredWords.html >
It could be modified to work where it changed the colors as you type,
but I found that rather annoying and hard on my eyes.

There's a huge flaw: when you insert a space in the middle of the
text, the cursor goes to the far end of the text.
I think this can be corrected quite easily on IE, but not on other
browsers (only IE can give you the position of the cursor).

This definitely ain't a simple problem (Hey, if it was, I wouldn't
have posted it here). And I suppose I'll have to learn Flash.

 

[Randy Webb]

Fabien LE LEZ said the following on 7/10/2006 5:51 PM:

Nope. Since Javascript is rather slow,

the textarea's text needs to show (I can't just let it be
transparent), so the "background span"'s text color won't
be visible, since it's behind.

For some reason, I wasn't thinking about it that way but it makes
perfect sense.

There's a huge flaw: when you insert a space in the middle of the
text, the cursor goes to the far end of the text.

That's a flaw, and it would take some work to fix it. When the space bar
is pressed, you get the cursor position. Then after the innerHTML is
assigned, you put the cursor back where it is. It does what it does now
because it blanks the div and then replaces it which puts the cursor at
the end.

Maybe later tonight or tomorrow I will tinker with it some more and even
work on fixing the <enter> key flaw in it. Type some text, hit the

I think this can be corrected quite easily on IE, but not on other
browsers (only IE can give you the position of the cursor).

That's not that hard to do, but the entire code is IE only anyway so
"not on other browsers" becomes a moot point

This definitely ain't a simple problem (Hey, if it was, I wouldn't
have posted it here).

It's an interesting idea, none the less.

And I suppose I'll have to learn Flash.

It would definitely be easier and more cross browser if written in Flash.

 

[Fabien LE LEZ]

When the space bar
is pressed, you get the cursor position. Then after the innerHTML is
assigned, you put the cursor back where it is.

I've thought about that all right, but AFAIK, there's no way to do
that on non-IE browsers.

And, I'd rather not do too much browser-specific code -- testing and
debugging on a few versions of IE, FF, Opera, Konqueror, Safari, and a
few other, is too time-consuming.
[Note: I'm rather lucky, since making a Links-compatible code isn't
mandatory ;-) ]

 

[Randy Webb]

Fabien LE LEZ said the following on 7/11/2006 12:27 PM:

When the space bar
is pressed, you get the cursor position. Then after the innerHTML is
assigned, you put the cursor back where it is.

I've thought about that all right, but AFAIK, there's no way to do
that on non-IE browsers.

And, I'd rather not do too much browser-specific code -- testing and
debugging on a few versions of IE, FF, Opera, Konqueror, Safari, and a
few other, is too time-consuming.
[Note: I'm rather lucky, since making a Links-compatible code isn't
mandatory ;-) ]

Write it in Flash and then test it in any browser with all of the
different versions of plugins and your testing time becomes comparable.

 

[Fabien LE LEZ]

I'd like to put, on a web page, a "place" where the user can type a
rather long text, with automatic coloring of each word (e.g. a color
depending on the number of letters of the word).

Well, that does not seem possible in Javascript -- at least, if I want
it to work on most browsers.
So, I've made it in Flash (now *that* is an annoying piece of
software :-/ )
In case someone is interested, I've put the Flash thingy here:
<http://perso.edulang.com/temp/demo-flash.zip>.

 

[Fabien LE LEZ]

Write it in Flash and then test it in any browser with all of the
different versions of plugins and your testing time becomes comparable.

Well, of course the final result will have to be tested on lots of
different browsers. That job is to be done even if there's only plain
HTML code. And, it must be done by someone else than the programmer.


But here, there's a huge difference between the two solutions:

- Javascript: here, we're using advanced, browser-specific features.
Sure, Mozilla and IE have the feature, and their interfaces are close
enough, but that's still browser-specific code. Especially with the
"get selection" feature.
And what about the non-IE, non-Gecko browsers?
In other words, there's a high probability that the result in each
browser will be different.

- Flash: I'm using a basic and well-documented feature. I'm pretty
confident that Macromedia did what was needed to make it work
everywhere. We're talking about only one editor here, not about the
long-lasting "feature war" between Mozilla and Microsoft.


Note: of course, advanced and/or undocumented features might give
different results in different versions of Flash.