Javascript 当另一个输入聚焦时，contenteditable div将丢失选择

我对contenteditable div有问题。当我想对其执行简单命令（如粗体或斜体）时，我会执行以下操作：

• 记住div（因为我点击粗体按钮后它会失去焦点）
• 单击按钮后，我重新聚焦div并执行bold命令
• 一切正常

现在，当我尝试做一些更困难的事情时，问题就出现了。例如，我想显示一个带有输入字段的自定义对话框：

• 记住div
• 单击按钮时，将显示一个对话框（一切仍然正常）
• 用户将一个输入字段集中在该对话框上（这就是一切都中断的地方）

这样做的问题是，一旦输入元素被聚焦，我的contenteditable div不仅会失去焦点，还会失去选择，并在我重新聚焦时将光标移到开头

---

因此，我的问题是：如何防止contenteditable div在关注另一个输入元素后丢失其选择？

如果输入元素和contenteditable元素位于同一文档中，您将无法防止contenteditable元素中的选择被销毁。但是，您可以做的是在输入框接收焦点之前保存选择，并在对话框关闭后恢复选择

下面是一些简单的示例代码：

这里有一个更完整的例子：

---

如果将input或contenteditable元素放在单独的iframe中，大多数浏览器（尽管不是IE）将保留原始选择。

谢谢，Tim。我自己怎么没找到这个。。。工作起来很有魅力！你确定你不能阻止吗？Google hangout似乎能够防止选择被破坏（从我在Google Chrome开发者工具中观察到的情况来看）。@threed:那是因为hangout框在一个单独的iframe中。也许我应该提到这一点。我在不使用单独的iframe的情况下成功地实现了这一点。当我点击一个按钮时，它工作，当我点击选择时，它丢失。@TimDown iframe方式在IE9+中是否保留选择？