Question

我正在开发一个小文本编辑功能，我需要知道用户何时选择/取消选择文本，以便我可以相应地显示可用选项。例如：选择文本后，您可以创建链接，使其变为粗体等。如果未选择任何文本，则根本不显示这些选项。

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

此作品

选择一些文字。
通过点击当前所选内容外文本中的任何其他位置取消选中。
结果应为“有一个有效选择：false”。

这不起作用

选择一些文字。
通过点击里面的当前选择来取消选择它。

结果应该是“有一个活跃的选择：false”，但它实际上仍然是真的。

这适用于Mac OS上的Chrome 36和Firefox 31。我还没有在其他浏览器中测试过。

我想也许在mouseup文本选择仍然处于活动状态，我应该等待其他事件发生，但我没有找到任何内容。

任何帮助都会很棒，谢谢：）

Answer 1

我终于通过确保使用mousedown功能在removeAllRanges()上移除了所有选择来解决这个问题。这里的工作示例：http://jsfiddle.net/0qqbaqo4/。

Answer 2

问题是该事件未在适当的时间被解雇。因此，当您测试选择状态时，取消选择事件尚未得到解决。

管理这个的一个简单方法是使用setTimeout（fn，delay）进行延迟函数调用。一种标准方法是将函数延迟0ms，这基本上意味着“在完成所有当前正在执行的函数之后”：

$('.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/

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

2 个答案: