javascript - 向不可编辑的 div 添加拼写检查？

Question

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

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

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

Answer 1

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

• 制作所有 <div>通过添加 tabindex 来聚焦属性。
• 一旦集中注意力，使用 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>