当 html 元素具有 contenteditable="true" spellcheck="true" 时立即显示下划线答案

【问题标题】：Show underlining immediately when html element has contenteditable="true" spellcheck="true"当 html 元素具有 contenteditable="true" spellcheck="true" 时立即显示下划线
【发布时间】：2019-05-26 13:05:32
【问题描述】：

我想突出显示页面加载范围内的拼写错误，例如，

<span contenteditable="true" spellcheck="true">gibberishnonesense</span>

目前，gibberishnonesense 没有下划线，除非我点击跨度。我希望在页面加载时出现下划线。似乎只有在您主动开始编辑时才会出现下划线。

是否有一个设置我需要切换到这个没有编辑下划线？是否有一个事件可以发送到将激活它的跨度 - 而不是更改 activeElement 或焦点（避免 el.focus();？

我知道text-decoration-style: wavy; 的样式，但下划线样式不同，我想利用用户代理的拼写检查器。

=== 我尝试过的事情：

通过JS改变元素内容

el.innerText += ''

通过 JS 发送“更改”事件

var manualChange = new Event('change');
el.dispatchEvent(manualChange);

===

一些研究表明这是 Chrome 特有的行为；但是，我的目标是 Chrome，因此需要它在那里工作。

我从another question 看到有一个forceSpellchek method 尚未在 Chrome 中实现

【问题讨论】：

也许在页面加载时，使用 JS，模拟点击元素来调用浏览器的拼写检查。最坏的情况，如果这对您的应用程序至关重要，您可以使用 JS 拼写检查库（有一些），这样您就可以完全控制体验。

标签： javascript css google-chrome spell-checking

【解决方案1】：

我从来没有找到一个令人满意的解决方案 - 正如你所说，拼写检查只有在你点击 contenteditable 文档时才会启动。

我想出的唯一答案是在加载时在文档开头插入一个横幅（例如：div），上面写着“单击以激活拼写检查” - 然后在单击时删除该 div。

点击 div 的行为会激活拼写检查，但它有点笨拙，因为我的所有用户都从新创建文章，所以我最终放弃了它。

我也相信拼写检查会在插入时发挥作用，因此这可能是一条值得研究的路线 - 我没有尝试过。

【讨论】：