contenteditable失去焦点并以编程方式将其重新获得后，如何再次获得选定的文本焦点

Question

我有一个div，它的contenteditable属性为true，

<div tabindex="1" id="editor" contenteditable="true"></div>

我还有一个像按钮一样的div

<div>Click Me</div>

问题在于，在编辑器框中键入内容后，我选择了一些文本，当我单击“单击我” div时，编辑器框失去了焦点，因此删除了突出显示的文本。

我在js中用编程方式将焦点传回了

document.getElementById("editor").focus()

但是在此之后，不再选择选定的文本，光标将移到编辑器框的开头。

如何获得焦点，以确保在单击“单击我”后再次选择了最初选择的文本

Answer 1

一种解决方案是在类似按钮的:b上设置user-select: none。如果您关心的浏览器支持它，那么它就是最简单的（但正如评论here中所讨论的，有人报告了使其在Safari中运行存在问题...）

否则，您必须使用JS保存和恢复选择，rangy.js的text range module对此很有用。查看https://stackoverflow.com/a/57546051/1026中的用法示例；在您的情况下，您需要将选择内容保存为模糊，并在处理类似按钮div的点击后将其恢复。