双击内部带有 contenteditable 的 div 并且 iframe 禁用 div

Question

如果我在 iframe 内创建了一个具有 contenteditable true 的 div，并且如果你双击它，它就会失效。焦点仍然在 iframe 中，你可以看到光标，但是它不响应 keydown

有人知道我该如何克服这个问题吗？

编辑：

我已经实现了一个dojo 编辑器。如果您在 ipad 中打开this link，您将看到上述问题。

Answer 1

您使用的是哪个操作系统？您应该确保您使用的是 OS 5.0 或更高版本。根据(Apple's Technical Notes) and Safari Web Content Guide。是这样写的：

iOS 5.0 及更高版本支持 HTML contenteditable 属性。在早期版本中，将用于在样式元素中启用文本输入的 contenteditable 替换为样式 textarea 元素。在 Safari 中，您可以使用 CSS 自定义 textarea 元素的外观。如有必要，您甚至可以通过将 -webkit-appearance 设置为 none 来禁用 textarea 元素上任何特定于平台的内置样式。

因此，如果您使用的是旧操作系统版本，则可以使用 textarea 元素而不是 contenteditable。然后，保证您的应用程序也能正常工作。

PS。你可以用你的IPAD继续这个website，试试它是如何与textarea一起工作的。这可能是你的一个例子。

希望对您有所帮助。

Answer 2

试图让一个可内容编辑的 div 在 iframe 中工作是一个复杂的层次，如果你想让它在一个特定的所见即所得编辑器（如 Dojo 编辑器）中工作，那就更难了，因为有很多JavaScript 影响交互。这将有助于更好地解释您的问题中的参数。

您是否使用过浏览器调试器（如 Firebug）来查看单击时发生的情况？

另一个 SO question and answer about contenteditable div vs iframe 很有用。

最后，如果您使用的是 iOS Safari，请确保您使用的是 Safari 5.0 或更高版本，因为 contenteditable 属性为 only recently supported on that browser。

编辑： 由于您使用的是 iOS 6，因此您应该使用 the iOS Safari JavaScript Debugger 让您在单击可编辑 div 时更清楚地知道发生了什么。如果您能找到一些更具体的错误消息，请更新我们。