How to use javascript touch events to select text on touchscreen

Question

I have this javascript with jQuery to do the job on computer-screens with mouse and keyboard connected:

For starting the selection of text on screen:

   $("body").on("mousedown", ".myDiv", async function(e) {
           //do something
    });

When the selection of text on screen is done:

$("body").on("mouseup",".myDiv", function(e) {
        //do something, e.g. windows.getSelection()        
    });

On a computer screen, it looks like this:

and on mobile screen it looks like:

On mobile, two things are happening that does not happen on computer screen:

two handles for modifing selection
a menu for doing stuff with selection

How do I achieve the same result as on computer screen, i.e. how to mimic mouseup-event when using touch to specifically signal to the browser, that i am done with the selection?

I have tried:

 $("body").on("touchstart",".myDiv", function(e) {
        //do something, e.g. windows.getSelection()        
    });
 $("body").on("touchend",".myDiv", function(e) {
            //do something, e.g. windows.getSelection()        
        });

Thank you!

FZs · Answer 1 · 2022-09-20T12:48:24.743

You're looking for the selectionchange event!

It detects changes in the selection regardless of how the text is selected (by mouse, touch, keyboard or a special device).

It doesn't tell you which element is selected (you have to determine it manually using document.getSelection()), nor does it signal that the user is done with the selection, but it will be fired every time the selection changes (you might want to add some timeout before making your popup appear).

document.addEventListener("selectionchange", function(e) {
  //do something, e.g. document.getSelection()        
  console.log("selectionchange")
});

<div class="myDiv">Some text that you can select</div>

How to use javascript touch events to select text on touchscreen

1 Answers1