如何在 contenteditable div 中取消选择？

Question

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

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

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

我试过这个：

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

但它没有用，因为 userSelect: none 似乎没有改变 div 元素中的任何东西 contenteditable。此外，对于这样一个简单的问题，这个解决方案看起来很丑陋。

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

Answer 1

我想你想完全删除 selection。将字符串替换为

后即可执行此操作

window.getSelection().removeAllRanges()

所以基本上，一旦您 select 了内容的范围，您就可以使用 window.getSelection() 方法获取范围，其中 returns 设置了有关 select 内容的详细信息。它有许多功能可以改变范围和完全删除范围。要了解更多信息，您可以阅读所有支持方法的简要说明 Selection API

如何在 contenteditable div 中取消选择？

How to cancel selection in contenteditable div?

html

javascript

selection