javascript - 如何支持跨浏览器多选文本？

Question

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

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

我深入研究了 Google 文档，特别是他们的文字处理应用程序是如何处理这个问题的，因为选择文本和单击“粗体”或“更改字体”的行为和机制本质上与我的注释功能相对应。在 Google Docs 中，他们将要编辑的文档文本加载到 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>