将拼写检查添加到不可内容编辑的 div？答案

【问题标题】：Add spellcheck to non-contenteditable div?将拼写检查添加到不可内容编辑的 div？
【发布时间】：2016-11-23 09:36:02
【问题描述】：

是否可以在不可编辑的 div 上运行浏览器的内置拼写检查器？以下代码用于检查拼写，但 div 必须是 contenteditable 并且只有在 div 获得焦点后才会执行拼写检查。

<div contenteditable="true" spellcheck="true">
    This paragraph gets spell checked when the div comes into focus
</div>

我想显示一个完整的 html 页面，并在所有拼写错误的单词下方显示红色波浪线

【问题讨论】：

拼写检查仅适用于可以编辑的区域。
进行一些搜索...w3schools.com/tags/att_global_spellcheck.asp
我知道预期的功能，但没有解决方法或插件？
@alsco77 我对此表示怀疑。
@PraveenKumar 如何设置内容可编辑元素中的所有内容，然后使用 jQuery 循环遍历它们，设置焦点（为错误加下划线）然后通过并删除内容可编辑标签？

标签： javascript html

【解决方案1】：

让我说，这些步骤可能有效：

通过添加tabindex 属性使所有<div> 成为焦点。
一旦获得焦点，使用 jQuery（因为无法使用 CSS），添加 contenteditable 属性。
一旦模糊，删除contenteditable 属性。

片段

$(function () {
  $(".ce").focus(function () {
    $(this).prop("contenteditable", true);
  }).blur(function () {
    $(this).prop("contenteditable", false);
  });
});

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<input type="text" placeholder="Click here and press tab!" />
<div class="ce" tabindex="0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis dolorem consequatur doloribus at, quam ipsam repudiandae libero ullam, commodi cum hic nam odit reiciendis? Distinctio inventore quasi, ex cupiditate neque.</div>
<div class="ce" tabindex="0">Sunt, consequatur. Dolorem odio nihil minima, in autem corrupti. Animi atque, eius laudantium. Excepturi laudantium suscipit esse nulla tempore aspernatur architecto. Dolorem a impedit, dolor voluptatum repellat mollitia itaque quod.</div>
<div class="ce" tabindex="0">Aliquam dolores, ipsam vel eum sed necessitatibus itaque error doloribus illum, omnis, ex exercitationem commodi neque quos voluptatibus debitis rem amet praesentium! Quibusdam corporis mollitia modi? In dignissimos ad itaque.</div>
<div class="ce" tabindex="0">Maxime, totam laudantium accusantium itaque sint possimus ex minus deleniti adipisci reprehenderit commodi illo corporis provident sed tempore architecto molestiae! Molestiae voluptas magni, non, ex assumenda quibusdam aliquam vitae ab.</div>
<div class="ce" tabindex="0">Quibusdam magnam, maiores eveniet commodi consequuntur sapiente, deleniti praesentium eius blanditiis. Suscipit fugit in repellendus quis ducimus illum, tempore voluptatem incidunt recusandae a perferendis id, distinctio vitae voluptatibus quibusdam necessitatibus.</div>

【讨论】：

【解决方案2】：

我使用以下代码使用 jquery-2.2.1.js 应用拼写检查器。我将所有 div 设为 contenteditable，然后在视图加载后运行：

$('.content-container').each((i, el: any) => {
    $(el)[0].focus();
    $(el)[0].setAttribute('contenteditable', 'false');            
})

【讨论】：