how to change color of text when enter space in javascript

Question

i am doing spell check application. i want to change the color of text after enter space. i got that wrong word. now i want how to change color of that text in textbox. using javascript.

Answer 1

Javascript can modify the CSS very easily, please check my example:

<input type="text" value="123" id="text1"/>
<script type="text/javascript">
document.getElementById("text1").style.color = "green";
</script>

Cheers,

Andrew

Answer 2

I don't think you can change the colour of just a word in a textarea.

But if you want to change the colour of text just in a text input, then the method outlined by rea_andrew should suffice. Just do a

document.getElementById("textboxid").style.color = "green";

Answer 3

Or use some of the libraries like JQuery. Using JQuery, it's simple.

Having

<input name="my-text" type="text" id="my-text">

Catch the key down event

$("input#my-text").keydown(function(event)
{
   switch (event.keyCode) {
      // space
      case 32: $(this).css("color","#f00"); //or set any other property
         break;
   }
}

If you want to highlight single word, you'll need to wrap it into span and change property just for this element.

And yes, to highlight a sigle word you need to use paragraph.

Answer 4

You'd basically need to do the same kind of thing TinyMCE and friends do building richer editors on top of the textarea. You are far better off using a pre-made library to do this for you. It is a lot more complicated than just changing the color, because you need to build a whole editor underneath that.