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

【问题标题】：How to support multiple text selections cross browser?如何支持跨浏览器的多个文本选择？
【发布时间】：2010-10-15 00:46:58
【问题描述】：

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

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

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

任何人都知道我在这里缺少什么才能使其正常工作吗？或者有另一种方法来让它工作的建议？

【问题讨论】：

你有这个可以链接到的地方吗？

标签： javascript html safari getselection

【解决方案1】：

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

见鬼，Firefox 甚至支持在单个框架上进行多项选择！（尝试单击并拖动，然后按住 ctrl 单击并拖动单独的一段文本。）

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

适用于我，在 Windows 上的 Safari 3.2.1 中。单击

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

【讨论】：

我也无法使用 Safari Mac 进行复制。
我无法重现您描述的 Firefox 多选行为。
你需要 Firefox 3 和一个纯 HTML 文本页面，它不会对鼠标事件做任何有趣的事情。（例如，它不适用于 SO 的评论/答案区域。） Click-drag-then-Ctrl-click-drag 在 Windows 和 Linux 中适用于我；我想 Mac 上的组合键可能会有所不同。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

在这个页面打开firebug，运行如下sn-p：

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

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

console.log(buffer);

瞧，点击/取消选择时间问题解决了 :)

【讨论】：