javascript - 当另一个输入聚焦时，contenteditable div 失去选择

Question

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

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

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

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

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

所以我的问题是：如何防止内容可编辑的 div 在我关注另一个输入元素后丢失其选择？

Answer 1

如果 input 和 contenteditable 元素在同一个文档中，您将无法防止 contenteditable 元素中的选择被破坏。但是，您可以做的是在输入框获得焦点之前保存选择并在对话框关闭后恢复选择。

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

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

这是一个更完整的例子：

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

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