How to bind a handler to a selection change on win

Question

Basically I need to know when the window.getSelection() has changed and bind a handler to this event. Ideas?

OBS: Please note that I'm not looking to bind a selection change on a INPUT or TEXTAREA. I'm talking about any selection in the window.

Answer 1

There is no cross-browser way of detecting changes to the selection. IE (since version 5.5, I think) and WebKit/Blink browsers (Chrome, Safari and Opera version from the last couple of years, for example) support a selectionchange event on the document which does exactly what you want.

Firefox and pre-Blink Opera have no such event and all you can do is detect selection changes made via keyboard and mouse events, which is unsatisfactory (there is no way of detecting "Select All" from context or edit menus, for example), or simply poll the Selection object returned by window.getSelection() (checking the selection's anchorNode, anchorOffset, focusNode and focusOffset properties against their previous values should be sufficient).

Answer 2

There is no cross-browser event for that.

However, there does exist an event called selectionchange, which trigger on every change in a selection in the document, but it is only supported in IE and recent WebKit (Chrome/Safari), so no Firefox/Opera.

You can use the selectionchange event like this:

$(document).on('selectionchange', function(e) {
    console.log('selectionchange', e.originalEvent); 
});

jsfiddle example

Answer 3

I think it would help

function foo() {
   var selObj = window.getSelection(); 
   alert(selObj);
   var selRange = selObj.getRangeAt(0);
   // work something with selObj
}