End of text selection event?

Question

Is there an event to end text selection in iOS?

I know that I can fire an event when the selection changes as follows:

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

This will update the .output with the selected text, but will be executed every time the selection is changed. What I want is only to capture the text after completing the selection.

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

Answer 1

Like you, I did not find a good solution to this problem, so I decided to create a workaround. it is not the most beautiful, but it works.

I created a timeout function and attached it to the onselectionchange event. Every time an event fires, I check if my timeout is working, and if so, I delete it and create a new one.

when the timeout is completed, the custom "selectionEnd" event 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 short post about this on my blog: http://www.dimshik.com/end-of-text-selection-event-on-ios-workaround/

Answer 2

I also run into this problem since I did not find a good solution, this is my workaround.
It fires the selectionEnd event when the user confirms his choice by pressing the confirm / return button in the clipboard of the mobile browser.

 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 the interval to control the selection. Then the user confirms his choice, and the clipboard automatically deletes it; which interrupts the monitor loop and dispatches a selectionEnd event.
You can access the last selected text in the detailed property.

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

Answer 3

How to bind 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/