Question

是否可以在不符合条件的div上运行浏览器内置的拼写检查程序？下面的代码用于检查拼写，但div必须是contenteditable，并且只有在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>

Answer 2

我使用以下代码使用jquery-2.2.1.js应用拼写检查程序。我让所有div都满足，然后在视图加载后运行：

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

添加拼写检查到非contenteditable div？

2 个答案: