在Webkit下失去焦点后，强制contenteditable div停止接受输入

Question

在Chrome和Safari (可能还有其他基于Webkit的浏览器)中，仍然可以输入内容可编辑的div，即使div失去了焦点。

我构建了一个简单的示例来说明这个问题：http://jsfiddle.net/yfcsU/3/

该示例有两个元素:一个带有contenteditable="true"的div和一个单击时将在contenteditable div上触发模糊事件的链接。

单击链接时，可编辑的div失去焦点，但您仍然可以在div中键入内容，任何按键操作都会使其重新获得焦点。

这种行为在Firefox中是不同的，在Firefox中它可以按预期工作:单击链接将导致可内容编辑的div停止接受输入。

在Webkit中，有没有办法强制contenteditable div在失去焦点后停止接受输入，而不禁用div上的contenteditable？

Answer 1

被标记为正确的答案实际上是正确的，但我会添加另一个可能更简单的解决方案。在对blur div调用blur()之后，您必须调用以下代码：

window.getSelection().removeAllRanges();

在这里测试：http://jsfiddle.net/mareksuscak/oytdoxy8/

在我看来，它做了同样的工作，也解释了为什么它不能正确工作-通常选择范围在模糊时从输入元素中删除，但不知何故不会对contentEditable div执行，因此在输入任何字符/libe换行符之后，它会再次被聚焦。

Answer 2

在与此斗争了一段时间后，我终于找到了一种方法来强制一个满足的元素停止接受Webkit上的输入。

解决方案是创建一个临时的可编辑元素，将其添加到DOM中，聚焦它，然后删除它。这将导致页面上的任何其他可内容编辑元素停用自身。

与此等效的jQuery代码为：

$('<div contenteditable="true"></div>').appendTo('body').focus().remove()

我已经更新了原始示例以包含此技术的演示：http://jsfiddle.net/yfcsU/4/