属性更改后触发拼写检查

Question

I have a contenteditable div with spellcheck set to false. I have a button that when clicked, changes the spellcheck attribute to true, but the spellcheck won't kick in until I click inside the div. I have tried triggering events for click, focus, blur, change etc. on the div, and nothing causes the red lines to appear. This is in old jQuery 1.8 (legacy app). is there a trick to this?

$('.spellcheck').live('click', function() {
    $('#editor').attr('spellcheck', true);
    $('#editor').click();
    $('#editor').focus();
    $('#editor').blur();
    $('#editor').change();
});

I have also wrapped the events in a 1 second setTimeout to get past any asynchronous race conditions, but no luck.

HTML Part:

<div id="editor" class="editor" contenteditable spellcheck="false"></div>
<button class="spellcheck">Check Spelling</button>

• this isn't really a problem of contenteditable, it happens on a normal div as well.

Answer 1

Click the button, it adds the spellcheck attribute and then sets focus to the #editor div. Spellcheck is active and underlining misspelled words.

Here it is in jQuery 1.8.1 :

 $('.spellcheck').click( function () { $('#editor').attr('spellcheck', true); $('#editor').focus(); }); 

 #editor { width: 200px; height: 100px; border: 1px solid #e0e0e0; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <div id="editor" contenteditable spellcheck="false"> somme mispellled wordds </div> <button class="spellcheck">Check Spelling</button> 

Here's the same code in a different snippet, this one running jQuery 1.2.3 :

 $('.spellcheck').click( function () { $('#editor').attr('spellcheck', true); $('#editor').focus(); }); 

 #editor { width: 200px; height: 100px; border: 1px solid #e0e0e0; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div id="editor" contenteditable spellcheck="false"> somme mispellled wordds </div> <button class="spellcheck">Check Spelling</button>