contenteditable divにスペルチェックを追加しますか？

Question

編集可能ではないdivで、組み込みのスペルチェッカーでブラウザを実行することはできますか？以下のコードはスペルチェックのために機能しますが、divはcontenteditableでなければなりません。スペルチェックはdivにフォーカスが入ると実行されます。

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

は私が

Answer 1

Iはjqueryの-2.2.1.jsを使用してスペルチェッカーを適用するために、次のコードを使用します。私はすべてのdivを編集可能にしてからロードした後に表示しました。

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

Answer 2

は私が言ってみましょうHTMLの完全なページを表示すると、すべてのミス綴られた単語の下に赤い波線があり、これらの手順がうまくいくかもしれない：

• がすべて行います<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>