將拼寫檢查添加到非contenteditable div？

是否有可能在內置的拼寫檢查器中運行瀏覽器，而這些拼寫檢查器不是令人滿意的？下面的代碼適用於檢查拼寫，但div必須是可以理解的，並且拼寫檢查僅在div對焦時執行。將拼寫檢查添加到非contenteditable div？

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

我想顯示HTML的一整頁，並有紅色波浪線下所有的錯誤拼寫的單詞

來源

2016-11-23 alsco77

拼寫檢查僅適用於可編輯的區域。 –

進行一些搜索...... http://www.w3schools.com/tags/att_global_spellcheck.asp – Alexis

我知道預期的功能，但是沒有解決方法或插件？ – alsco77

我用下面的代碼使用jQuery的2.2.1.js應用拼寫檢查器。我讓所有的divs contentedable，然後在視圖加載後運行：

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

來源

2016-11-23 10:58:56 alsco77

讓我說，這些步驟可能的工作：

讓所有<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>

來源

2016-11-23 10:19:19

將拼寫檢查添加到非contenteditable div？

回答

相關問題