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

Question

我正在构建一个基于 Web 的注释工具，最终用户可以在其中选择 HTML 文档中的一段文本并对其进行注释。 从编程角度来说，使用“window.getSelection”和“getRangeAt”访问和使用所选文本和相应范围非常简单。

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

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

有人知道我在这里缺少什么才能让它发挥作用吗？ 或者对另一种让它发挥作用的方法有建议吗？

Answer 1

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

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

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

，在 Windows 上的 Safari 3.2.1 中，对我有用。 单击<按钮>，<输入类型=“按钮”> 或 将选择保留在原来的位置，但如果它位于不同的框架中，则显示为灰色。 “window.getSelection()”继续照常工作。

您能否发布一个测试用例以及哪个 Safari 版本会导致其行为异常？

Answer 2

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

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

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

Answer 3

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

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

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

然后您可以选择您想要的任何内容并通过运行查看最后选定的文本：

console.log(buffer);

瞧，单击/取消选择计时问题已解决:)