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

【问题标题】：How to get the selected text focus again after contenteditable lost focus and gained it back programmartically如何在 contenteditable 失去焦点并以编程方式重新获得焦点后再次获得选定的文本焦点
【发布时间】：2019-07-10 11:26:12
【问题描述】：

我有一个 div 的 contenteditable 属性为真，

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

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

<div>Click Me</div>

遇到的问题是，在编辑器框中输入后，我选择了一些文本，当我单击“单击我”div 时，编辑器框失去焦点，从而删除了突出显示的文本。

我在 js 中使用以编程方式将焦点发回

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

但在此之后所选文本不再被选中，光标只是移动到编辑器框的开头。

如何获得焦点以确保在单击单击我后再次选择初始选定的文本

【问题讨论】：

标签： javascript forms focus contenteditable dom-events

【解决方案1】：

一种解决方案是在您的按钮上设置user-select: none，类似于div。如果您关心的浏览器支持它，那是最简单的（但正如 cmets here 中所讨论的，有人报告说让它在 Safari 中运行时出现问题......）

否则你将不得不使用 JS 保存和恢复选择，rangy.js 的text range module 对此很有用。查看https://stackoverflow.com/a/57546051/1026 以获取使用示例；在您的情况下，您需要保存选择 onblur 并在处理单击类似 div 的按钮后恢复它。

【讨论】：