Триггер события выделенного текста в Javascript

Question

Триггер события выделенного текста в Javascript

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

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

371 6

jQuery javascript

6 ответов:

Comments

Ничего не найдено.

jAndy · Accepted Answer · 2017-05-23 13:31:20

нет "текст был выбран"(DOM) событие, но вы можете связать mouseup событие document.body. В этом обработчике событий вы можете просто проверить
document.selection.createRange().text
или
window.getSelection()
методы. Есть несколько тем на Stackoverflow, как этот javascript, чтобы получить абзац выделенного текста на веб-странице.

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

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

karim79 · Accepted Answer · 2013-08-07 05:24:34

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

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

Demo:http://jsfiddle.net/FvnPS/11/

Ricky Han · Accepted Answer · 2016-09-27 09:40:54

есть новый экспериментальный API, который занимается этим:

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

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

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

Jayampathy Wijesena · Accepted Answer · 2017-09-06 14:12:22

использовать следующий код:

(function () {
    "use strict";
    var showSelectedText = function (e) {
        var text = '';
        if (window.getSelection) {
            text = window.getSelection();
        } else if (document.getSelection) {
            text = document.getSelection();
        } else if (document.selection) {
            text = document.selection.createRange().text;
        }

        console.log(text.toString());
    }

    document.onmouseup = showSelectedText;
    if (!document.all) {
        document.captureEvents(Event.MOUSEUP);
    }

})();

Это пример кода, который я использовал во время одного из моих назначений. Это сработало для меня.

vikmalhotra · Accepted Answer · 2010-08-23 09:18:06

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

посмотри здесь для кода и демо.

Macist · Accepted Answer · 2017-03-10 12:11:56

есть событие" текст был выбран". Но только для textarea, как я знаю.
<textarea onselect="message()" name="summary" cols="60" rows="5">
请写入个人简介，不少于200字！
</textarea>