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

Posted 2023-02-16

【中文标题】双击内部带有 contenteditable 的 div 并且 iframe 禁用 div

【英文标题】：Double clicking on a div with contenteditable inside and iframe disables div

【发布时间】：2013-05-18 09:28:18

【问题描述】：

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

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

编辑：

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

【问题讨论】：

显示您的代码！在最好的情况下，构建一个演示您的问题的最小示例。

@padde 见jsbin.com/upavuv/1

你使用 iframe 的目的是什么？ （有一些，我需要澄清一下它为你提供了什么）我认为 contenteditable 是你的最终目标——一个可编辑的 div，而 iframe 是某种类型的中间层。

@DanSorensen iframe 是由 dojo 编辑器创建的。

【参考方案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一起工作的。这可能是你的一个例子。

希望对您有所帮助。

【讨论】：

我正在使用 OS 6.0。如果我创建一个简单的 contenteditable div，它工作正常，但是在实现 dojo 编辑器之后会发生这种情况

@NisanthSojan 很遗憾地告诉您，dojo editor 不支持 IOS 设备。有很多人尝试开发它，但他们失败了。你可以看看Dojo website。据记载，iOS 4.x、5.x（Mobile Safari）和 6.x（包括除编辑器外的所有 Dijit 小部件）以及来自 Dojo 电子邮件系统的 link。

【参考方案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 时更清楚地知道发生了什么。如果您能找到一些更具体的错误消息，请更新我们。

【讨论】：

它在桌面浏览器中运行良好。这个问题只出现在 ipad 上。我正在尝试在 ipad 应用程序中实现 dojo 编辑器

因为它发生在 iOS 6.0 中，我更新了我的答案，提供了有关如何解决 JavaScript 错误/事件的信息。