Question

如果有人在使用鼠标在页面上选择给定文本片段时触发JavaScript函数？
另外，有没有办法在页面上找到所选文字的位置？

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

Answer 1

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

document.selection.createRange().text

或

window.getSelection()

方法。 Stackoverflow上有几个主题，例如javascript to get paragraph of selected text in web page。

我不确定你对“找到位置”的意思，但是为了留在我的示例世界，你可以使用event propertys来获得X + Y鼠标位置。

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

Answer 2

这是一个快速混搭：

$('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/

Answer 3

有一个新的实验API可以解决这个问题：

当修改文档的选择对象时，或者当与return new Configuration().configure().buildSessionFactory();或<input>关联的选择发生更改时，将触发Selection API的selectionchange事件。第一种情况下，在第二种情况下的元素上触发了selectionchange事件。

https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange

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

Answer 4

AFAIK，你没有描述过这样的事件。但你可以效仿这个功能。

查看here代码和演示。

Answer 5

有＃34;选择了文字＆＃34;事件。但只有我知道的textarea。

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

Answer 6

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();

Answer 7

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

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

});

Answer 8

当您按下鼠标按钮时，将触发mousedown事件，释放鼠标按钮时，将触发mouseup和click事件。

因此，我们收听mouseup事件，并检查是否选择了任何文本，并执行了相应的操作。

const p = document.getElementById('interactiveText');

p.addEventListener('mouseup', (e) => {
  const selection = window.getSelection().toString();

  if (selection === '') {
    console.log('click');
  } else {
    console.log('selection', selection);
  }
});

Answer 9

有一个快捷方式可以从事件对象中获取所选文本。

event.currentTarget[event.currentTarget.selectedIndex].text

在Javascript中选择的文本事件触发器

9 个答案: