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.
Have you tried setting (didn't work, see other solution below) display: none
(using CSS) and then setting the display back to what it was? Might force Chrome to redraw the element...
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/
The spellcheck attribute specifies whether the element is to have its spelling and grammar checked or not:
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:
indeterminate
property or any other custom properties, will be destroyed. This is okay for now, but I'm still looking for a better answer. Suggestions?
将元素spellcheck="false"
到元素中对我有用。
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.