End of text selection event?

Question

Is there an event for the end of text selection on iOS?

I know I can run an event when the selection changes through the following:

document.addEventListener("selectionchange", function(event) {
        var text = window.getSelection().toString();
        $(".output").append("<div>" + text + "</div>");
}, false);

<div class="output"></div>

This will update .output with the selected text, but runs every time the selection changes. What I would want, is to only capture the text after the selection has finished.

Is there any such event? Is it possible to do something like this?

score 11 · Answer 1 · answered Feb 25 '13 at 23:02

11

How about binding a mouseup event?

JAVASCRIPT:

document.addEventListener("mouseup", function(event) {
        var text = window.getSelection().toString();
    $(".output").append("<div>" + text + "</div>");
}, false);

DEMO: http://jsfiddle.net/dirtyd77/yTMwu/66/

answered Feb 25 '13 at 23:02

Dom

38,906
12
52
81

1

No, `mouseup` is not triggered when the finger leaves the screen on iOS. – Charlie Feb 26 '13 at 01:06
1

I wish :\ If you were to select text, then release your finger, `touchend` is not called. If, however, you then tap somewhere within the selection, it calls `touchend`. – Charlie Feb 26 '13 at 01:22
4

`pointerup` event will work with both mouse and finger. https://www.w3.org/TR/pointerevents3/#the-pointerup-event – Komsit Prakobphol Oct 13 '20 at 01:25
Elegant solution ! – Aerodynamic Jun 12 '23 at 12:14

dimshik · Answer 2 · 2014-04-01T14:09:28.867

Similar to you i didn't found a good solution for this problem, So i decided to create a workaround. it's not the prettiest but it works.

I created a timeout function and bind it to a "onselectionchange" event. Each time the event fired i check if my timeout is running, and if so i delete it and create a new one.

when the timeout is finished a custom event "selectionEnd" is fired.

// bind selection change event to my function
document.onselectionchange = userSelectionChanged;

function userSelectionChanged() {

    // wait 500 ms after the last selection change event
    if (selectionEndTimeout) {
        clearTimeout(selectionEndTimeout);
    }

    selectionEndTimeout = setTimeout(function () {
        $(window).trigger('selectionEnd');
    }, 500);
}

$(window).bind('selectionEnd', function () {

    // reset selection timeout
    selectionEndTimeout = null;

    // TODO: Do your cool stuff here........

    // get user selection
    var selectedText = getSelectionText();

    // if the selection is not empty show it :)
    if(selectedText != ''){
       // TODO: Do something with the text
    }
});

DEMO: http://jsfiddle.net/dimshik/z8Jge/

I wrote a small post about it in my blog: http://www.dimshik.com/end-of-text-selection-event-on-ios-workaround/

Interesting... I wonder if there would be anyway to only log the text once the finger has been released from the screen. As of now, this will run when the selection has stopped changing, but not when the finger has completely finished selecting. — Charlie, Apr 01 '14 at 13:35

nicokant · Answer 3 · 2015-09-06T16:32:05.257

I'm also facing this problem, since I haven't found a good solution this is my workaround.
It will fire a selectionEnd event when user confirm his selection pressing confirm/back button in the mobile browser Clipboard.

var longpress = false;
var longpressTimer = null;
var loop = null;
var latestSelection = null;

window.ontouchstart = function(){
    longpressTimer = setTimeout(function(){
        longpress = true;
        loop = setInterval(getSelection, 200);
    }, 500)
};

window.ontouchend = function(){
    if(longpressTimer){
        clearTimeout(longpressTimer);
    }
    longpress = false;
}

var getSelection = function (){
    var s = window.getSelection();
    if(s.rangeCount > 0){
        latestSelection = s.getRangeAt(0);
    }else{
        clearInterval(loop);
        var selEndEvent = new CustomEvent("selectionEnd", {"detail": latestSelection});
        window.dispatchEvent(selEndEvent);
    }
}

When a long-press is performed, it starts a interval to monitor the selection. Then user confirms his selection and the clipboard automatically deletes it; that breaks the monitor loop and sends the selectionEnd event.
You can access the last selected text in detail property.

I hope to get some news about this problem and to get a better solution.

End of text selection event?

3 Answers3

Linked