Using jQuery to add a CSS class to keywords in real-time?

Question

I want to have a set of keywords like: "wrongKeyWordOne, wrongKeyWordTwo, wrongKeyWordThree."

As the user types in the typing area (or other HTML element), for example, something like this:

This is the wrongKeyWordOne and this is the wrongKeyWordTwo

I want to use jQuery to add classes to those keywords in real-time:

This is the <strong class="wrong-key">wrongKeyWordOne</span>
and this is the <strong class="wrong-key">wrongKeyWordTwo</wrong-key>

CSS:

.wrong-key {
   background: #F00;
}

I'm not sure if this is hard to accomplish.

Any suggestions?

You can add span´s to a result DIV, but you can´t use span´s inside a textarea field. — Niels, Dec 08 '11 at 16:00
@Niels Oh yeah I forgot about that, so it is more difficult than I imagined. — alexchenco, Dec 08 '11 at 16:08
do you wish to do something similar to this sites TAG edit box, where the Tag elements are styled as they are entered into the text box? — stephen776, Dec 08 '11 at 16:22
Take a look at this answer: http://stackoverflow.com/a/7599199/184596 — Laurent, Dec 08 '11 at 16:23

score 1 · Accepted Answer · answered Dec 08 '11 at 18:42

1

This is not as easy as one might think, but it is possible.

The sites I've seen (and made) that does this sort of thing, actually cheats with an overlaying or underlying element containing the text.

Instead of trying to explain exactly how it works, here's a Fiddle to show it in action, it's just a quick demonstration, and creating something that works perfectly will take some more fiddling around.

http://jsfiddle.net/aMSPy/

answered Dec 08 '11 at 18:42

adeneo

312,895
29
395
388

Hey thanks! Just one thing, is there any way of displaying the cursor (it seems to have disappeared)? – alexchenco Dec 08 '11 at 20:55
1

That's one of the things you will have to figure out, I've seen solutions with an animated gif or a custom cursor made in javascript. There is one other way of doing this, and that is using the contentEditable method. It is more complicated and I don't have the time to create a fiddle for it, but [-here's-](http://www.quirksmode.org/dom/execCommand/) a demostration using contentEditable, and it will let you create a textfield that can be edited in almost any way, but it also takes a lot more code to get it working. You could try searching for a plugin of some sorts that uses contentEditable. – adeneo Dec 08 '11 at 21:05

Using jQuery to add a CSS class to keywords in real-time?

1 Answers1