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)将保留原始选择。