Question

我正在构建一个基于Web的注释工具，最终用户可以从HTML文档中选择和注释一段文本。从编程上讲，使用“window.getSelection”和“getRangeAt”可以直接访问和使用所选文本和相应的范围。

但是，当我尝试将所有这些放在一个跨浏览器的应用程序中时，我遇到了一个问题。一切都可以在Firefox中找到，但在Safari中我立即注意到当我点击HTML按钮（即“注释”按钮）时，当前用户文本选择消失，就像点击按钮重新定位文本插入符一样。我尝试访问window.getSelection的代码从此按钮中的脚本执行，然后报告不存在选择。

我深入研究了Google Docs，特别是他们的文字处理应用程序如何处理这个问题，因为选择文本和点击“Bold”或“Change Font”的行为和机制基本上与我的注释功能相对应。在Google文档中，他们会将要编辑的文档文本加载到iframe中。玩弄这个，我了解到Firefox开箱即用支持包含多个框架或iframe的网页中的多个选择范围。换句话说，我可以在基页中选择一段文本，而iframe中的单独文本部分没有第一个选择消失。此Google Docs解决方案适用于Firefox和Safari（我感兴趣的两种浏览器）。但是当我构建一个简单的示例页面来测试这个解决方案时，它在Safari中不起作用。只要我单击按钮或在根页面（iframe外部）中选择文本，当前iframe选择的文本就会消失。

任何人都知道我在这里缺少什么才能让它发挥作用？或者有另外一种方法可以让它发挥作用吗？

Answer 1

将事件处理程序挂钩到按钮的mousedown事件（而不是click或mouseup事件）。这将允许您在清除之前获取当前选择。

您可以通过将选择存储在变量中来维护用户体验，只有在按钮收到点击事件时才使用它。像这样：

<button onmousedown="sel = window.getSelection()" onclick="alert(sel)">What's the selection?</button>

Answer 2

在我的脑海中，我认为最简单的解决方案是将事件处理程序附加到文本选择并将当前选择保存到缓冲区，这样您就不必担心计时。

在此页面上打开firebug并运行以下代码段：

var buffer = '';
$('p').mouseup(function() {
    buffer = window.getSelection();
});

然后，您可以选择所需内容，并通过运行以下内容查看上次选择的文本：

console.log(buffer);

Voila，点击/取消选择已解决的时间问题：）

Answer 3

我了解到Firefox开箱即用支持包含多个框架的网页中的多个选择范围

地狱，Firefox甚至支持在一个帧上进行多项选择！（尝试单击并拖动，然后按住Ctrl键单击并拖动单独的文本。）

Safari中的
我立即注意到，当我点击HTML按钮时，当前的用户文本选择消失了，好像点击按钮重新定位了文本插入符号

适用于我，在Windows上的Safari 3.2.1中。点击＆lt; button＆gt;，＆lt; input type =“button”＆gt;或者＆lt; a＆gt;将选择留在原处，尽管它在不同的框架中是灰色的。 'window.getSelection（）'继续像往常一样工作。

您可以发布测试用例以及Safari版本的行为错误吗？

如何跨浏览器支持多个文本选择？

3 个答案: