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

时间:2012-09-10 13:59:24

标签: webkit contenteditable

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

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

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

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

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

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

2 个答案:

答案 0 :(得分:8)

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

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

相应的jQuery代码是:

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

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

答案 1 :(得分:8)

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

window.getSelection().removeAllRanges();

在此测试:http://jsfiddle.net/mareksuscak/oytdoxy8/

在我看来它做同样的工作并且也解释了为什么它不能正常工作 - 通常选择范围在输入元素被模糊时被删除但是它在某种程度上不会被执行contentEditable div并且因此在输入任何字符/ libe之后打破它再次集中注意力。