How to bind a handler to a selection change on window?

javascript selection dom-events
Karl Mendes picture Karl Mendes · Jan 24, 2012 · Viewed 6.9k times · Source

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

Tim Down picture Tim Down · Jan 27, 2012

2019 update

All major browsers now support the selectionchange event, which does the job. Firefox was the last browser to get it, and it has had it without a configuration flag since version 52 (released in March 2017).

Original answer

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).

Related questions

jQuery - select all text from a textarea

How can I make it so when you click inside a textarea, its entire content gets selected? And eventually when you click again, to deselect it.

Read More
How can I get a list of all values in select box?

I am stumped. I have a form with a dropdown list, and I would like to grab a list of all the values in the list. I pulled the below example from w3 schools (yes, I know it's unreliable, but …

Read More
Programmatically select text in a contenteditable HTML element?

In JavaScript, it's possible to programmatically select text in an input or textarea element. You can focus an input with ipt.focus(), and then select its contents with ipt.select(). You can even select a specific range with ipt.setSelectionRange(…

Read More