27

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

oneself
  • 38,641
  • 34
  • 96
  • 120
  • On what criteria do you want any particular portion of text to have a different colour? – David Thomas Jan 30 '11 at 22:11
  • I would identify certain keywords ahead of time, and would like to change their color as the user is typing. Similar to how syntax highlighting works in an IDE. – oneself Jan 31 '11 at 02:16
  • alternative example in here http://stackoverflow.com/a/33588043/257319 (using CSS and no inline-style) –  Nov 07 '15 at 21:48

3 Answers3

59

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>
Tim Down
  • 318,141
  • 75
  • 454
  • 536
  • 4
    Your answer is not 100% right. It is possible to change textarea properties using javascript as thats the way [codemMirror](http://codemirror.net/) has done it. Look at their example code to see how they did it – LegendaryLaggy Apr 27 '13 at 20:30
  • 2
    @user1951751: No, the main edit area in CodeMirror is not a textarea. You can read more about it here: http://marijnhaverbeke.nl/blog/browser-input-reading.html. Admittedly my answer doesn't mention the CodeMirror approach (regular div and pre elements for the editor, fake caret, hidden textarea for user input). – Tim Down Apr 28 '13 at 23:14
  • @TimDown Interesting, didn't notice that just from the code, thanks for the link – LegendaryLaggy Apr 29 '13 at 16:58
  • You don't need to assign a value to some attributes, which includes ContentEditable. `` will work as well. – Arjun Mar 29 '16 at 10:14
  • @Arjun: That is true. However, I prefer to be explicit and provide the value, particularly on SO, because `contenteditable` isn't a Boolean attribute. Its allowed values are "true", "false" and "inherit". – Tim Down Mar 29 '16 at 10:42
  • @Arjun: It was required however in XHTML. In HTML 5 maybe not so. – BarbaraKwarc Jun 22 '18 at 19:00
  • This is an old answer, but I wanted to ask if there is any difference between using and
    ? Both allow contenteditable
     – MysteryPancake Aug 02 '18 at 23:09
  • 1
    @MysteryPancake: There's no significant difference except for default style properties for the respective elements (e.g. `` is by default inline, `
    ` is block, `` defaults to monospace font, `
    ` doesn't).
     – Tim Down Aug 06 '18 at 15:51
1

Are you finding this?

Use jQuery.colorfy

Code: https://github.com/cheunghy/jquery.colorfy

Demo: http://cheunghy.github.io/jquery.colorfy/

Screencast: https://www.youtube.com/watch?v=b1Lu_qKrLZ0

Zhang Kai Yu
  • 362
  • 2
  • 8
  • this is not maintained anymore, use this: https://lonekorean.github.io/highlight-within-textarea/ – Pezhvak Jul 28 '19 at 16:03
-2

This can actually be done by using styling inside of the tag, this is a reference from one of my websites where i have done this 

<input style="border-radius: 5px; background-color: #000000; color: #ff0000; border-color:
 blue;" class="form-control" name="firstname" placeholder="What you were looking for?"
 type="text"
 required autofocus />
Provision
  • 273
  • 1
  • 10
  • 1
    This doesn't satisfy the asker's condition of: "I'd like those words to be colored a different color **as the user types** into the textarea or text input" – Tim Apr 06 '20 at 07:28