JavaScript selectionchange-EventListener, triggering infinitely on document.execCommand

Question

I have added an event listener for selectionchange as below,

document.addEventListener("selectionchange", 
function()
{
    highlight();
    console.log("selectionchange-triggered");
}, false);

then I have added the below code, to highlight selected text.

function highlight()
{
    document.designMode = "on";
    document.execCommand("hiliteColor", false, "#ff0000");
    document.designMode = "off";
}

When the highlight function is called, the EventListener for selectionchange is fired infinitely until I clear the selection.

have any one faced the same issue ? can any one suggest a solution to solve this issue ?

@Mephiztopheles:Can I set event listener for selectStart and selectEnd? — , Nov 25 '14 at 13:00
@Mephiztopheles: I found in Microsoft website that, event listener cane be set for selectstart, but I am working on Safari, is that available for Safari ? — , Nov 25 '14 at 13:26
@Mephiztopheles I tried setting it on Safari, but not working. — , Nov 25 '14 at 13:30
Ok, maybe it will help if you have a look at the selectstart event like jquery it binds. so.. what i mean is, go to jquery.com and download the uncompressed version, and search for the selectstart reerence... maybe they're working different in safari — Mephiztopheles, Nov 25 '14 at 15:21
I found this: http://help.dottoro.com/ljnactnw.php They say, safari should support it — Mephiztopheles, Nov 25 '14 at 17:46
@Mephiztopheles: but I have tried the same above code, but replaced "selectionchange" with "selectstart" and "selectend", but the event listener was not fired i.e. no logs like "selectionchange-triggered". — , Nov 26 '14 at 04:17
@Mephiztopheles:I was put the highlight() function call inside that event handler. Now I have removed it and called it on button click event, so now the infinite loop is not there. I think, the problem is that, the execCommand triggers selectionchange event, don't know why ? Anyway Thx for the help... — , Nov 26 '14 at 05:03
is your wish to have a different selection background than default? There is a way in css to do it: `::selection {background: #ff0000}` , `::-moz-selection {background: #ff0000}` — Mephiztopheles, Nov 26 '14 at 07:26
the selectstart works on desktop Safari, but not on mobile Safari. I tried http://jsfiddle.net/rzmstcot/ also in mobile Safari, the event is not fired. — , Nov 26 '14 at 08:37
There is no `selectend` event. `selectionchange` is your best bet. — Tim Down, Nov 26 '14 at 09:17

Tim Down · Answer 1 · 2014-11-26T10:30:02.143

0

I suggest using a simple flag to prevent the infinite loop. The window.setTimeout() call is there because the selectionchange event doesn't fire synchronously when document.execCommand() is called.

Demo: http://jsfiddle.net/rzmstcot/5/

Code:

var highlighting = false;

function highlight()
{
    document.designMode = "on";
    highlighting = true;
    document.execCommand("hiliteColor", false, "#ff0000");
    document.designMode = "off";
    window.setTimeout(function() {
        highlighting = false;
    }, 1);
}

document.addEventListener("selectionchange", 
function()
{
    if (!highlighting) {
        highlight();
    }
    console.log("selectionchange-triggered");
}, false);

edited Nov 26 '14 at 10:30

answered Nov 26 '14 at 09:20

Tim Down

318,141
75
454
536

@Mephiztopheles: No, I didn't check it. I should have said so in the answer. – Tim Down Nov 26 '14 at 10:19
@Mephiztopheles: Fixed now. – Tim Down Nov 26 '14 at 10:30
Not bad ;) I was looking for a solutuon without extra variables, but it seems to be the best way, when mobile safari doesn't support selectstart – Mephiztopheles Nov 26 '14 at 10:41
The infinite event firing is not there now, but sometimes Mobile Safari crashes. Don't know exact scenario, but it was when selecting all text or on moving the selection control continuously for some time. – Nov 26 '14 at 11:22

JavaScript selectionchange-EventListener, triggering infinitely on document.execCommand

1 Answers1