1

When focused, the div has spell checking enabled which is fine. However, when the div is no longer in focus and there are spelling errors, the spell checking red squiggle lines remain.

Following the accepted answer suggested in this question:

spellcheck=false on contentEditable elements

I added event listeners on the blur and focus events that toggle between edit.spellcheck = false; and edit.spellcheck = true;to prevent the red squiggle lines from appearing when the div is no longer in focus but the problem still persist.

.edit {
  border: 1px solid gray;
}
<div class="edit" contenteditable="true"></div>
Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
Personal Information
  • 561
  • 5
  • 19
  • The spellcheck property prevents the lines from appearing but does not remove ones that already set. – skyline3000 Aug 12 '19 at 21:15
  • Seems to work perfectly fine for me: https://jsfiddle.net/r0t936nw/ The accepted answer doesn't rely on event listeners. It just sets the attribute and triggers both events once so the attribute takes effect. – icecub Aug 12 '19 at 21:17
  • @ icecub the reason i decided to go with event listeners is because element.spellcheck = false; element.focus(); element.blur(); didn't work for me as well as console logging max callstack errors. It's strange that it didn't work for me but it's working in your fiddle. Thanks, I'll try it again and if it doesn't work i'll go with Dacre Denny's answer. – Personal Information Aug 12 '19 at 21:24

1 Answers1

3

My understanding is that removal of red lines under spelling errors cannot be consistently enforced for editable elements (or form fields), on all browsers/platforms, when those elements are blurred - regardless of the spellcheck attributes value being set to "false".

A work around that might help here is that the red squiggles are removed when the element is no longer editable. You could take advantage of this to achieve what you want, by toggling the contenteditable attribute to true when clicked (ie focused), and false when blurred:

const edit = document.querySelector('.edit');

edit.addEventListener('click', function() {
  
  /* Make content editable when clicked */
  edit.setAttribute('contenteditable', true);
});

edit.addEventListener('blur', function() {

  /* Remove content editable when blurred to ensure spelling lines disappear */
  edit.setAttribute('contenteditable', false);
});
.edit {
  border: 1px solid gray;
}
<div class="edit">som seplling erors</div>

Hope that helps!

Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
  • +1 because I think this is a far better solution than the one provided in the linked question. Having spell checking available during edits is way more beneficial – icecub Aug 12 '19 at 21:23