Javascript中的选定文本事件触发器

77

当有人使用鼠标在页面上选择给定的文本片段时，如何触发JavaScript函数？
另外，有什么方法可以找到所选文本在页面上的位置吗？

更新：更清楚地说，文本片段可以是句子或单词或短语的一部分，也可以是整个段落。

javascript jquery

— 泰迪
source

78

没有“选择了文本”(DOM)事件，但是您可以将mouseup事件绑定到document.body。在该事件处理程序中，您可能只需检查

document.selection.createRange().text

要么

window.getSelection()

方法。关于Stackoverflow，有几个主题，例如使用此javascript获取网页中选定文本的段落。

我不确定“寻找位置”是什么意思，但是要留在我的示例世界中，您可以使用event propertysX + Y鼠标位置。

示例：http：//www.jsfiddle.net/2C6fB/1/

— 安迪
source

谢谢Andy，Ya，我认为我们能获得的最好是X + Y鼠标位置。

5

您还应该考虑通过键盘进行选择。

— Tim Down'8

2

有一个“已选择文本”（DOM）事件：w3schools.com/jsref/event_onselect.asp

— user681814 2013年

4

在键盘选择方面，我观察了用户释放的转变：document.addEventListener('keyup', function(e) { var key = e.keyCode || e.which; if (key == 16) highlight(); });

— willlma

2

最好使用selectionchange事件，因为它window.getSelection()可能会selection在mouseup事件上返回旧对象。

— Cani

60

这是一个快速混搭：

$('div').mouseup(function() {
    var text=getSelectedText();
    if (text!='') alert(text);
});

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

<div>Here is some text</div>

演示：http：//jsfiddle.net/FvnPS/11/

— karim79
source

6

似乎有一个window.getSelection();与IE相当的普遍想法document.selection.createRange().text;。人们是从相同的，不准确的来源复制吗？无论如何，window.getSelection()返回一个Selection对象而document.selection.createRange().text;返回一个字符串，这是一个非常不同的对象。混淆源于以下事实：对象的toString方法Selection返回选定的文本，这意味着alert(window.getSelection());将警告选定的文本。

— Tim Down'8

固定。Mozilla的文件说：“这使得选择对象看起来像一个字符串，当它实际上是有自己的属性和方法的对象具体，称选择对象的toString（）方法的返回值被传递。” :) developer.mozilla.org/en/window.getSelection

— karim79

2

嘿。我以前没看过很抱歉听到您的回答：您可能已经推断出，我之前在SO上对此进行了几次更正。

— 蒂姆·唐

2

@Tim Down-您没有加入，实际上您是正确的，并且在指出这一点上做得正确。

— karim79 2010年

11

有一个新的实验性API可以处理此问题：

修改文档的选择对象或与<input>或关联的选择<textarea>发生更改时，将触发Selection API的selectionchange事件。在第一种情况下，在文档上触发selectionchange事件，在第二种情况下，在元素上触发selectionchange事件。

https://developer.mozilla.org/zh-CN/docs/Web/Events/selectionchange

请注意，这是最前沿的，即使在主要的浏览器中也不能保证能正常工作。

— 韩瑞奇
source

2

尽管此链接可以回答问题，但最好在此处包括答案的基本部分，并提供链接以供参考。如果链接的页面发生更改，仅链接的答案可能会失效。-来自评论

— eisbehr

我修改了答案

— Ricky Han

最新标准还缺少基本的“可选”属性。因此仍然需要供应商前缀，因为每个浏览器的实现方式都不同。自v1以来，ActionScript中已有20年了：help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/…–

— Triynko

1

AFAIK，您没有描述这样的事件。但是您可以模拟该功能。

在这里查看代码和演示。

— 维克马尔霍特拉
source

1

谢谢ShiVik，它真的很有帮助。此仿真是否具有浏览器依赖性？

@abhishiktiwari - AFAIU的博客-无

— vikmalhotra

1

有“选择了文本”事件。但仅针对我所知道的textarea。

<textarea onselect="message()" name="summary" cols="60" rows="5">
请写入个人简介，不少于200字！
</textarea>

— 麦克斯
source

0

var selectedText = "";

if (window.getSelection) {
    selectedText = window.getSelection();
}

if (document.getSelection) {
    selectedText = document.getSelection();
}

if (document.selection) {
    selectedText = document.selection.createRange().text;
}

function textSelector() {
   alert(selectedText);
}
textSelector();

— Mowneshachar
source

0

我不确定鼠标的作用，但是此行适用于移动设备，每次对文本选择进行更改时都会调用此行-

document.addEventListener('selectionchange', () => {

});

— 盎司
source