如何知道用户何时取消选择文本，如果在以前的活动选择单击

How to know when user unselects text if clicking in previously active selection?

本文关键字：选择 单击 活动 如果 用户 何知道 何时 取消 文本      更新时间：2023-09-26

我正在研究一个小的文本编辑功能，我需要知道用户何时选择/取消选择文本，以便我可以相应地显示可用的选项。例如:当文本被选中，你可以创建一个链接，使其粗体等。如果没有选择任何文本，则根本不显示这些选项。

我在mouseup和keyup事件上使用window.getSelection()，然后检查isCollapsed属性的值，以查看是否有活动选择。它有效，但并非在所有情况下都有效。下面是使用JSFiddle进行复制的一些步骤:http://jsfiddle.net/0qqbaqo4/

这是

  1. 选择一些文本
  2. 通过单击当前选定文本以外的任何位置来取消选中。
  3. 结果应该是"There is a active selection: false"。

这行不通

  1. 选择一些文本
  2. 通过单击内的任何来取消选中。
  3. 结果应该是"There is a active selection: false"，但它实际上仍然是true。

我在Mac OS上使用Chrome 36和Firefox 31时会遇到这种情况。我还没有在其他浏览器上测试过。

我想也许在mouseup的文本选择是仍然活动，我应该等待一些其他事件触发，但我没有找到任何

。

任何帮助将是伟大的，谢谢:)

我最终通过使用removeAllRanges()函数确保在mousedown上删除任何选择来解决这个问题。这里的工作示例:http://jsfiddle.net/0qqbaqo4/.

问题是事件没有在正确的时间被触发。所以当你在测试选择状态时，取消选择事件还没有被解决。

一个简单的方法来管理这是有一个延迟的函数调用，使用setTimeout(fn,delay)。一种标准方法是将函数延迟0毫秒，这基本上意味着"在所有当前执行的函数完成之后": 
$('.editable').on('mouseup keyup', function(e){
   var selection = window.getSelection();
   setTimeout(function() {
       $('#result').text('There is an active selection : ' +           
                         !selection.isCollapsed);
   }, 0);
});

可能有一个由jQuery触发的事件总是在解析后触发，但我发现延迟响应通常没有那么多的阅读效果更好。: -)

看到:

http://jsfiddle.net/0qqbaqo4/2/

相关文章：