属性更改后触发拼写检查

Question

我有一个内容可编辑的 div，拼写检查设置为 false。我有一个按钮，单击该按钮会将拼写检查属性更改为 true，但在单击 div 内部之前，拼写检查不会启动。我曾尝试在 div 上触发点击、聚焦、模糊、更改等事件，但没有任何原因导致出现红线。这是在旧的 jQuery 1.8（旧版应用程序）中。这有什么诀窍吗？

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

我还将事件包装在 1 秒的 setTimeout 中以通过任何异步竞争条件，但没有运气。

HTML 部分：

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

• 这实际上不是 contenteditable 的问题，它也发生在普通 div 上。

Answer 1

单击按钮，它会添加spellcheck 属性，然后将焦点设置到#editor div。拼写检查处于活动状态并在拼写错误的单词下划线。

这里是 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>

这是不同 sn-p 中的相同代码，这个运行 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>