8

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

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

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

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

4

3 回答 3

3

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

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

<button onmousedown="sel = window.getSelection()" onclick="alert(sel)">What's the selection?</button>
于 2009-03-31T13:08:42.020 回答
3

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

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

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

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

console.log(buffer);

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

于 2009-04-03T01:10:27.427 回答
2

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

见鬼，Firefox 甚至支持单帧多选！（尝试单击并拖动，然后按住 ctrl 单击并拖动单独的一段文本。）

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

在 Windows 上的 Safari 3.2.1 中为我工作。单击 <button>、<input type="button"> 或 <a> 会将选择保留在原来的位置，尽管如果它在不同的框架中则显示为灰色。'window.getSelection()' 继续照常工作。

你能发布一个测试用例，哪个 Safari 版本让它行为不端？

于 2009-03-23T20:01:13.263 回答