Question

113

Multicolor Text Highlighting in a Textarea or Text Input

rated 0 times [ 119] [ 6] / answers: 1 / hits: 45025 / 14 Years ago, sun, january 30, 2011, 12:00:00

I'd like to set text in a textarea or text input using different colors (one or the other is fine, I don't need both). Think of something like simple syntax highlighting. So, let's say I have some keywords defined. I'd like those words to be colored a different color as the user types into the textarea or text input

I understand this needs to be some combination of CSS, Javascript, and maybe some pixie dust. I wondering which direction I need to dig into to find out how this can be done.

Thank you

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

rhiannab

Add To Favorites

Follow

Total Points: 370

Total Questions: 98

Total Answers: 100

Location: Samoa

Member since Mon, Nov 8, 2021

3 Years ago

answered 14 Years ago raveno · Accepted Answer

No, you can't do this in a textarea or text input. Any CSS text-related property will affect the whole text within the the textarea/input. You'll need an editable element or document to achieve syntax highlighting. Example (works in all recent browsers; the last major browser not to support contenteditable was Firefox 2.0):

<code contenteditable=true>

  <span style=color: blue>var</span> foo = <span style=color: green>bar</span>;

</code>