I want to detect when a user finishes making a text selection on android, using cordova and javascript. This is possible for multi-word selections (see the gist by parthibeyond, added at the end of the question for completeness), but it does not work for a single word selection. When initiating a selection by touching and holding a word the following events are fired in sequence:
selectstartcontextmenuselectionchangetouchcancel
At this point, the user can either lift their finger to select only the initial word, or move it while still touching the screen to select additional words. Is there any way to detect the first case of single word selection? The touchcancel event prevents the touchend event from being fired, and a timer is not useful since the user may hold the finger still for an arbitrary amount of time before moving it for multi-word selection.
The OS indicates the removal of the finger, indicating the end of the selection, for both single and multi-word selection by adding “grab handles” at either end of the selected text:
Finger touching screen (context menu suppressed for clarity)
Finger removed from screen
Is there any way to get this event in javascript?
The only workaround I can find is to call event.preventDefault() on touchstart but this removes all text selection and scrolling functionality.
Code for multi-word selection end event, credit parthibeyond
function customisedSelectListener(el = document, callbackFn) {
// events to be listened - 'selectstart', 'selectionchange', 'contextmenu'
let eventSequence = [];
el.addEventListener('selectstart', function() {
eventSequence = [];
eventSequence.unshift(event.type);
})
el.addEventListener('selectionchange', function() {
if (eventSequence[0] != 'selectionchange') {
eventSequence.unshift(event.type);
}
})
el.addEventListener('contextmenu', function() {
eventSequence.unshift(event.type);
if (eventSequence[1] == 'selectionchange') {
callbackFn.call();
}
})
}
Usage:
customisedSelectListener(document, function (){
alert('Text Selection Completed !!');
})
