Selected text event trigger in Javascript

Question

It may sound a newbie question but I wanted to know how I can trigger a custom JavaScript function when someone selects a given text fragment on a page using mouse. Also is there any way to find the position of selected text on the webpage?

Update: To be more clear, text fragment can be part of a sentence or a word or a phrase or whole a paragraph.

Answer 1

There is no "Text was selected" (DOM) event, but you can bind a mouseup event to the document.body. Within that event handler, you might just check the

document.selection.createRange().text

or

window.getSelection()

methods. There are several topics on Stackoverflow, like this one javascript to get paragraph of selected text in web page.

I'm not sure what you mean with "finding the position", but to stay in my example world you could use the event propertys for X+Y mouse positions.

Example: http://www.jsfiddle.net/2C6fB/1/

Answer 2

There is "Text was selected" event. But only for textarea as I hava known.

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

Answer 3

Use the following code:

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

})();

This is sample code which I used during one of my assignment. It worked for me.

Answer 4

AFAIK, there is no such event you described. But you can emulate that function.

Look over here for the code and demo.

Answer 5

Here's a quick mashup:

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

Answer 6

There is a new experimental API that deals with this:

The selectionchange event of the Selection API is fired when the selection object of the document is modified, or when the selection associated with an <input> or a <textarea> changes. The selectionchange event is fired at the document in the first case, on the element in the second case.

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

Note that this is bleeding edge and not guaranteed to work across even major browsers.