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

Question

在Chrome和Safari(以及可能的其他基于Webkit的浏览器)中,即使在div失去焦点之后,仍然可以输入一个可信的div.

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

该示例有两个元素:一个div contenteditable="true"和一个链接,当点击它时会触发contenteditable div上的模糊事件.

单击链接时,contenteditable div会失去焦点,但您仍然可以键入div,任何按键都会使其重新聚焦.

这种行为在Firefox中按预期工作方式不同:单击该链接将导致contenteditable div停止接受输入.

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

Answer 1

在经历了一段时间的努力之后,我一直想找到一种方法来强制一个可信的元素来停止接受Webkit上的输入.

解决方案是创建一个临时的可编辑元素,将其添加到DOM,将其聚焦然后将其删除.这将导致页面上的任何其他contenteditable元素自行停用.

相应的jQuery代码是:

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

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

Answer 2

标记为正确的答案实际上是正确的,但我会添加另一个可能更直接的解决方案.在contentEditable div上调用blur()之后,你必须调用它:

window.getSelection().removeAllRanges();

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

在我看来,它做同样的工作,也解释了为什么它不能正常工作 - 通常选择范围在输入元素被模糊时被删除但是它在某种程度上不会为contentEditable div执行,因此在输入任何字符/ libe break之后它是重点关注.