Javascript 如何防止不再聚焦的contenteditable div中出现红色扭曲线？

聚焦时，div启用了拼写检查，这很好。但是，当div不再处于焦点并且存在拼写错误时，拼写检查红色的波形线仍然存在

以下是该问题中建议的公认答案：

我在blur和focus事件上添加了事件侦听器，在

edit.spellcheck=false之间切换

和

edit.spellcheck=true以防止div不再聚焦但问题仍然存在时出现红色扭曲线


。编辑{
边框：1px纯色灰色；
}
我的理解是，对于所有浏览器/平台上的可编辑元素（或表单字段），当这些元素模糊时，无论拼写检查属性值设置为“false”，都无法始终强制删除拼写错误下的红线

一个可能有帮助的解决方法是，当元素不再可编辑时，红色的曲线将被删除。单击（即聚焦）时将
contenteditable
属性切换为
true
，模糊时将属性切换为
false
，您可以利用这一点来实现所需：


const edit=document.querySelector（'.edit'）；
edit.addEventListener（'click'，function（）{
/*单击时使内容可编辑*/
edit.setAttribute（'contenteditable'，true）；
});
edit.addEventListener（'blur'，function（）{
/*删除模糊时可编辑的内容，以确保拼写行消失*/
edit.setAttribute（'contenteditable'，false）；
});
。编辑{
边框：1px纯色灰色；
}
som sepling erors
拼写检查属性阻止显示行，但不会删除已设置的行。对我来说似乎工作得很好：接受的答案不依赖于事件侦听器。它只设置属性并触发两个事件一次，以便属性生效。@icecub我决定使用事件侦听器的原因是因为element.spellcheck=false；元素focus（）；元素blur（）；对我来说不起作用，控制台记录最大调用堆栈错误。奇怪的是，它对我不起作用，但对你却起作用。谢谢，我会再试一次，如果不行，我会用Dacre Denny的答案。+1，因为我认为这是一个比链接问题中提供的解决方案好得多的解决方案。在编辑过程中进行拼写检查更有益