Question

我有一个内容可编辑的div，其拼写检查设置为false。我有一个按钮，当单击该按钮时，会将spellcheck属性更改为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>

这实际上不是可编辑内容的问题，它也发生在普通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>

不同的代码段中有相同的代码，该代码运行 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>

属性更改后触发拼写检查

1 个答案: