当另一个输入集中时，contenteditable div会失去选择

Question

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

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

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

• 记住div
• 点击按钮，会显示一个对话框（一切都还可以）
• 用户将一个输入字段集中在该对话框上（这就是所有内容都会中断的地方）

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

所以我的问题是：在关注另一个输入元素后，如何防止一个可信的div失去其选择？

Answer 1

如果输入和contenteditable元素在同一文档中，您将无法阻止contenteditable元素中的选择被销毁。但是，您可以执行的操作是在输入框获得焦点之前保存选择，并在关闭对话框后恢复选择。

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

https://stackoverflow.com/a/3316483/96100

这是一个更全面的例子：

https://stackoverflow.com/a/4690057/96100

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