How To Change A Single Character Color In Textarea

Please i need to change color of a single character in textarea using JQuery.

Solution 1:

You can't. A textarea is plain text only. That's why, for example, HTML inside a textarea is rendered literally (except for </textarea>).

Solution 2:

I changed the textarea by a content editable div:

<div contenteditable="true"></div>


div {width:98%;clear: both;font-size: 10pt;max-width:98%;height:250px;min-height:98%; 
      left:10px;right:10px;background-color:#fff;border:1px solid #1c578d;bottom:10px;top:10px;color:#1B4A90;overflow:auto;
      display:inline;}

Solution 3:

This isn't a full answer, but in HTML5 there is the contenteditable attribute. Here is a link to an example. This does support specific styling.

Solution 4:

The only way to do that would be to create your own "element". For example, create an empty div, and a focus handler which would enable the key press listener - the key press handler would then at the pressed character to the html of the div. If the char is the one (or one of those) you want you'd add a span (for example) around it to style it. Of course, you'll have to be able to handle things such as holding down a keyboard key should keep adding the same char, also you'd need to handle deleting via delete, backspace, and selection, etc. A lot of stuff to do just to be able to highlight a char.

Solution 5:

You can't change colors, but what you can do is select a particular character (highlight by way of JavaScript.)

See Highlighting a piece of string in a TextArea