8

在 Chrome 和 Safari（可能还有其他基于 Webkit 的浏览器）中，即使在 div 失去焦点之后，仍然可以输入 contenteditable div。

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

该示例有两个元素：一个 divcontenteditable="true"和一个链接，该链接将在 contenteditable div 被单击时触发模糊事件。

单击链接时，contenteditable div 失去焦点，但您仍然可以输入 div 并且任何按键都会导致它重新聚焦。

这种行为在 Firefox 中有所不同，它按预期工作：单击链接将导致 contenteditable div 停止接受输入。

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

4

2 回答 2

10

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

window.getSelection().removeAllRanges();

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

在我看来，它做了同样的工作，也解释了为什么它不能正常工作 - 通常选择范围在模糊时从输入元素中删除，但它不会以某种方式对 contentEditable div 执行，因此在输入任何字符/自由中断后它是再次聚焦。

于 2014-11-12T15:01:48.653 回答
8

在为此苦苦挣扎了一段时间后，我本可以找到一种方法来强制 contenteditable 元素停止接受 Webkit 上的输入。

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

等效的 jQuery 代码是：

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

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

于 2012-09-12T07:47:37.373 回答