javascript - 如何取消 contenteditable div 中的选择？

Question

在我的页面上，我有一个 contenteditable div 元素。当按下特定键时，将执行一个函数:

function bla(element) {
  if (getSelectionHtml() != "") {
    replaceSelectedText("text");
  }
}

getSelectionHtml() 检查用户是否选择了某些内容。 replaceSelectedText(text) 用给定的字符串替换选定的文本。两个功能都工作正常。
替换所选文本后，我想“取消”用户的选择，因为选择现在等于"new"字符串，因此仅删除文本不是一个选项。

我尝试过这个:

element.style.userSelect = "none";
element.style.userSelect = "text;

但它不起作用，因为 userSelect: none 似乎没有使用 contenteditable 更改 div 元素中的任何内容。另外，对于这样一个简单的问题，这个解决方案看起来相当丑陋。

那么，如何取消用户的选择呢？

Answer 1

我认为您想完全删除选择。将字符串替换为

后即可执行此操作

window.getSelection().removeAllRanges()

基本上，一旦您选择了内容范围，您就可以使用 window.getSelection() 方法获取范围，该方法返回有关所选内容的详细信息集。它具有许多改变范围和完全删除范围的功能。要了解更多信息，您可以阅读所有支持的方法简介Selection API