Change textcolor of specific parts in textarea

Is there any possibility to change the text-color of some parts in a textarea in HTML?

I like to output some highlighted PHP-Code on my website and give the possibility to select the complete code by one click on this textarea. I've already wrote a javascript function to select the complete text. But if I try to put spans around the text, they are printed, too.

Maybe it should work with a div, if there is a way to select the text in a div by one click.


No, it's impossible, but you can have some css to make a div to look like it's a <textarea> and inside the div you can put several <span>s with colors.

You can also use something like this

  • Editing : I can recommend the Jquery Editable plugin. Also try this plugin. Not only does it perform in place editing but also selects the inner text for you.
  • Copying : zClip does a great job of copying to clipboard.
  • Highlighting : You can look into the snippet Jquery plugin to highlight language syntax

So, you would display properly 'colored' code;when the user clicks on the div with the code, it changes to an editable textarea and if the user clicks on the icon besides the textarea, the code is copied to the clipboard.

There are many scripts out there that do just this, here's a nice list

9 Useful Javascript Syntax Highlighting Scripts

Most of these have the functionality you require, so you don't need to reinvent the wheel - unless you really want to :-)

Need Your Help