CODEWITHSUNDEEP
javascripthtmlcss
Personal Information
Personal Information

Reputation: 581

How to prevent red squiggle lines from a contenteditable div that is no longer in focus?

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>

Upvotes: 1

Views: 1840

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30390

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!

Upvotes: 4

Related Questions