可编辑的div在另一个输入框获取焦点时失去了选择。

Question

5

我有一个关于contenteditable div的问题。当我想在其上执行简单的命令（如加粗或斜体）时，我会按照以下步骤进行：

- 记住div（因为我在点击加粗按钮后它将失去焦点） - 点击按钮时，重新聚焦到div并执行加粗命令 - 一切正常

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

- 记住div - 在按钮单击时，显示一个对话框（一切仍然很好） - 用户在对话框中聚焦到一个输入字段（这就是问题所在）

问题出在：一旦聚焦到输入元素，不仅我的contenteditable div会失去焦点，而且还会失去选择，并在重新聚焦后将光标移到开头。

所以我的问题是：如何防止contenteditable div在我聚焦到另一个输入元素后失去其选择？

- Marius

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim Down · Accepted Answer

如果输入框和可编辑元素在同一文档中，你将无法防止被选中的内容在可编辑元素中被破坏。然而，你可以在输入框获得焦点之前保存选择，并在对话框关闭后恢复选择。

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

这里是一个更完整的示例：

如果你将输入框或可编辑元素放置在单独的 iframe 中，则大多数浏览器（尽管不包括 IE）将保留原始选择。