Выбранный текстовый триггер события в Javascript - PullRequest
65 голосов
/ 23 августа 2010

Как вызвать функцию JavaScript, когда кто-то выделяет данный фрагмент текста на странице с помощью мыши?
Кроме того, есть ли способ найти положение выделенного текста на странице?

Обновление: Чтобы быть более понятным, фрагмент текста может быть частью предложения или слова или фразы или целого абзаца.

Ответы [ 5 ]

70 голосов
/ 23 августа 2010

Нет события " Text * " (DOM), но вы можете связать событие mouseup с document.body. В этом обработчике событий вы можете просто проверить

document.selection.createRange().text

или

window.getSelection()

методы. В Stackoverflow есть несколько тем, таких как javascript для получения абзаца выделенного текста на веб-странице .

Я не уверен, что вы имеете в виду под "нахождением позиции", но чтобы остаться в моем мире примеров, вы могли бы использовать event propertys для положений мыши X + Y.

Пример: http://www.jsfiddle.net/2C6fB/1/

55 голосов
/ 23 августа 2010

Вот быстрый мэшап:

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

7 голосов
/ 27 сентября 2016

Существует новый экспериментальный API, который имеет дело с этим:

Событие selectionchange API Selection запускается, когда изменяется объект выбора документа или когда изменяется выбор, связанный с <input> или <textarea>. Событие selectionchange вызывается для документа в первом случае, для элемента во втором случае.

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

Обратите внимание, что это крайний край и не гарантированно будет работать даже в основных браузерах.

1 голос
/ 10 марта 2017

Событие «Текст был выбран».Но только для текстовой области, которую я знаю.

<textarea onselect="message()" name="summary" cols="60" rows="5">
请写入个人简介,不少于200字!
</textarea>
1 голос
/ 23 августа 2010

AFAIK, такого события вы не описали.Но вы можете эмулировать эту функцию.

Просмотрите здесь для кода и демонстрации.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...