6

I would like to add a colored wiggly underline to certain text fragments of a <textarea> element. The effect would be similar to that of spell checkers.

How can I do this with javascript, possibly with the help of jquery?

The only control I have over the html markup is through javascript. My first thought was to add styles to those text fragments, but as far as I know, one can only style the entire textarea element, not individual text fragments.

I know what I am trying to achieve is possible, as there is commercial software achieving a similar effect, but I'm still trying to figure out what are the tricks involved.

Filipe Correia
  • 5,415
  • 6
  • 32
  • 47

4 Answers4

3

I dont think this is possible within a textarea, most WYSIWYG editors online use a contenteditable div or iframe made to look like a textarea to style the text within the innerHTML of those elements and therefore display on the front end, you can then get the textContent or innerText of the div/iframe. Using jQuery you could do something like:


<div contenteditable='true' id='editor'>this is the wrd</div>


$('#editor').html($('#editor').html().replace("wrd", "<span style='color: red;'>wrd</span>"));

not tested at all but should style the div correctly. you could then use $('#editor').text() to retrieve the text value.

nukeem
  • 111
  • 1
  • 7
3

The approach being used is to hide the textarea and create a div that is editable (add the attribute contenteditable="true" to a div. I'm not too sure of browser compatibility). On every key press the javascript grabs all the content, locates mis-spelled words and puts a span around the offending word. Using css they put a squiggle red underline under the word (an image of a small segment of red squiggle)

Thinking about it, they would need to keep track of the location of the cursor in the div in case the user starts entering text in the middle of the box, so that after altering the contents the script returns the cursor to the correct position and not at the end of the block of content.

Also, you would need to update the value of the textarea on each keypress.

[edit]

Here is a jsFiddle of proof of concept: http://jsfiddle.net/tEnY8/

Bottom line, when you type into the box, the value is put into the textarea and any incorrect words are underlined and turned red. At the moment it only flags the last word as being incorrect. You need to comment that line out, uncomment the for loop, and implement the isMispelled(String) function.

[edit]

Here is a further proof of concept: http://jsfiddle.net/tEnY8/4/

Basically I've set up an array of correctly spelled words, then the loop checks if the word exists in the array; if it does not then the word is probably mis-spelled.

Richard Parnaby-King
  • 14,703
  • 11
  • 69
  • 129
  • Thanks. The only thing missing is keeping track and restoring the cursor position :) I bet there's a way of replacing a word with a span-wrapped version of it. This would avoid replacing the entire div's contents, hence keeping the cursor position. – Filipe Correia Sep 25 '12 at 13:29
  • I'm currently looking at how the ['highlight' jquery plugin](http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html) works, but any pointers would be appreciated. – Filipe Correia Sep 25 '12 at 13:29
2

As you say it is actually not possible to just edit the font or properties of one line of a textarea.

Instead, what the website you have linked to is doing, it using an editable DIV, and linking this through Javascript and some clever CSS to the hidden textarea (the textarea itself is display:none and visibility:hidden;)

I suggest using firebug to have a look at how they've done it, as it's pretty impressive.

MasNotsram
  • 2,105
  • 18
  • 28
2

What they do is have a <div> element which they use to do all the styling, and it just looks like a textarea.

This post might help you do something along those lines: https://stackoverflow.com/a/3536762/349012

Community
  • 1
  • 1
manavo
  • 1,839
  • 2
  • 14
  • 17