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

Question

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

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

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

<div>Click Me</div>

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

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

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

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

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

标签： javascriptformsfocuscontenteditabledom-events

Answer 1

一种解决方案是设置user-select: none您的类似按钮的div. 如果你关心的浏览器支持它，它是最简单的（但正如这里的评论中所讨论的，有人报告了让它在 Safari 中工作的问题......）

否则，您必须使用 JS 保存和恢复选择，rangy.js 的文本范围模块对此很有用。查看https://stackoverflow.com/a/57546051/1026以获取使用示例；在您的情况下，您需要保存选择 onblur 并在处理类似按钮的点击后恢复它div。