0

我一直在研究一些逻辑来处理用户突出显示的文本。我在http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html找到了 Mark Koli 的一个很好的例子。

我在以下位置创建了一个工作示例：http: //jsfiddle.net/metalskin/43c8h/8/

我对特定实例的代码有疑问，如下所示：

  1. 选择一些文本。
  2. 对话框出现。
  3. 关闭对话框。
  4. 现在单击而不拖动以清除突出显示的文本。
  5. 对话框出现。
  6. 关闭对话框。
  7. 文本被取消选择。

在我的逻辑中，我没有使用对话框（例如，它更简单），我插入了一个带有图像的 div 以允许用户执行操作。

问题是第二次单击实际上是清除文本，但由于某种原因，浏览器在清除文本之前触发了鼠标向上事件（无论如何在 Firefox 下）。这显然不是弹出对话框的问题，但根据我的逻辑，我最终添加了多个 div，因此文本上有多个浮动图像。

有没有办法确定该事件将导致突出显示的文本被删除？理想情况下，我宁愿在浏览器清除文本后触发事件。

我应该解释我如何使用它的用例。

  1. 用户突出显示页面上的文本
  2. 一个图标出现在他们刚刚释放鼠标按钮以突出显示文本的位置上方
  3. 用户选择图标，这将打开一个表单以输入一些详细信息以标记突出显示的文本（此时图标已删除）
  4. 用户提交表单（ajax），表单关闭。
  5. 页面显示，突出显示的文本现在不突出显示（但添加了额外的标记）。

或者

  1. 用户突出显示页面上的文本
  2. 一个图标出现在他们刚刚释放鼠标按钮以突出显示文本的位置上方
  3. 用户单击页面上的其他位置以删除突出显示的文本并删除图标。
  4. 用户提交表单，表单关闭。

选择图标时取消选择所选文本没有问题，但问题是如果他们单击页面的另一部分，它会重新激活鼠标事件并因此双图标（或不合适时的对话框在提供的示例中）。

4

1 回答 1

0

给你^_^

http://jsfiddle.net/43c8h/16/

我只是更改了这段代码以清除鼠标向上事件的选择。

if (selectedText != '') {
    alert("You selected:\n" + selectedText + "\n");
    window.getSelection().removeAllRanges();
}

或者，如果您想在用户选择文本后保持突出显示，您可以使用相同的window.getSelection().removeAllRanges();调用 mousedown 函数。每次单击鼠标时清除选择的代码。

于 2012-01-05T08:53:09.650 回答