How to change a single character color in textarea

Question

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

Add more requirements and please show how far you got. – Sgoettschkes Mar 26 '12 at 14:23 — Sgoettschkes, Mar 26 '12 at 14:23

score 3 · Answer 1 · answered Mar 26 '12 at 14:24

3

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

answered Mar 26 '12 at 14:24

Niet the Dark Absol

311,322
76
447
566

2

[Live under a rock much?](http://www.strangeplanet.fr/work/jquery-highlighttextarea/) – bzlm Mar 26 '12 at 14:27
Hax. It is ugly, especially when scrolling, editing or resizing, or just generally doing anything other than looking at the textarea. And if the only point of a textarea is to be looked at, why bother making it a textarea? – Niet the Dark Absol Mar 26 '12 at 14:30
@bzlm: this would be cool if the textarea didn't have to be sized using known values - i.e. it doesn't like `position:absolute;top:0;bottom:0;'. That it whacks a bunch of wrapper divs around the box too is annoying. And that the font rendering is nasty.. i mean, http://ace.c9.io/ is neat but overkill if you just want to highlight text! For me, this solution has potential in some corner cases... – frumbert Aug 25 '14 at 05:41

score 2 · Accepted Answer · answered Mar 30 '12 at 09:47

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;}

score 0 · Answer 3 · answered Apr 10 '15 at 08:27

0

Use this jQuery plugin: jQuery.colorfy

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

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

answered Apr 10 '15 at 08:27

Zhang Kai Yu

362
2
8

score 0 · Answer 4 · answered Mar 26 '12 at 14:29

0

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.

answered Mar 26 '12 at 14:29

Brian Warfield

357
1
11

score 0 · Answer 5 · answered Mar 26 '12 at 14:29

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.

score 0 · Answer 6 · edited May 23 '17 at 11:52

0

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

edited May 23 '17 at 11:52

Community

1
1

answered Mar 26 '12 at 14:29

pp19dd

3,627
2
14
20

How to change a single character color in textarea

6 Answers6

Linked