Red spellcheck squiggles remain in chrome after editing is disabled

Question

UPDATE: This has been identified as a bug in Chrome. (Thanks @michael-robinson)

In Chrome (v22 at least), I notice that it's possible for spellchecking "red squiggly" underlines to remain even after contentEditable has been disabled.

I made a jsfiddle to demonstrate: jsfiddle demo.

Even if I set the attribute spellcheck="false" before disabling contentEditable, they remain.

Anyone know how a nice way to solve or work around this? Ideally I'd retain the built-in spell checking functionality when the content is editable.

Answer 1

Have you tried setting display: none (using CSS) and then setting the display back to what it was? Might force Chrome to redraw the element... (didn't work, see other solution below)

Alternatively, you could create a copy of the element (but with contenteditable disabled) placing it just after the original element and deleting the original element.

UPDATE 1: first solution didn't work, but second one does. Updated JSfiddle http://jsfiddle.net/RegVn/6/

UPDATE 2: above solution uses innerHTML which removes destroys event handlers. It also destroys the selection/caret position.

New method uses jQuery's clone() method (in deep clone mode) to create a copy of the object (which copies over the event handlers), and has custom functions to save a reference to the selection, and restore it afterwards. Note that the selection save/restore functions wont work in ie6-8, but I thought that this was acceptable as the question is tagged Chrome. Updated JSfiddle: http://jsfiddle.net/RegVn/23/

Answer 2

Adding the attribute spellcheck="false" to the element works for me.

Answer 3

The spellcheck attribute specifies whether the element is to have its spelling and grammar checked or not:

spellcheck="false"

Answer 4

If you update the innerHTML of the element, the spellcheck will be re-evaluated, so they'll disappear if spellcheck="false" or if the element isn't editable.

For example:

myElement.innerHTML = myElement.innerHTML + " "; // add a space to force a change.

This has significant disadvantages:

• Event handlers and javascript objects referencing any elements will be invalidated (all elements inside the element are effectively removed from the dom). This also means that javascript-only properties, such as a checkbox's indeterminate property or any other custom properties, will be destroyed.
• The selection or caret position is destroyed.
• If you have a large amount of content, this is a non-trivial operation for the cpu, especially on mobile.

This is okay for now, but I'm still looking for a better answer. Suggestions?

Answer 5

var content = $("#editor").html();
$("#editor").html("")
$("#editor").attr('spellcheck', 'false');
$("#editor").html(content);

try this code and it should work. This is based on the same previous answer of cloning inner HTML.

Works in FF and Chrome.