Simulate Long Press in Javascript

Question

I have a webapp where when the user clicks on a field, the text inside is highlighted for him to copy. However, on Android this does not trigger the opening of the copy context menu, so the user must select the text himself.

Is there a way to programmatically trigger the long press event so that the copy/paste context menu appears on mobile browsers?

https://stackoverflow.com/questions/6139225/how-to-detect-a-long-touch-pressure-with-javascript-for-android-and-iphone — justMe, May 07 '18 at 13:40
you should try this https://stackoverflow.com/questions/4669464/select-all-text-inside-edittext-when-it-gets-focus — MennyMez, May 07 '18 at 14:01
if you are looking for consistent and performant solution avoid using jQuery. I can provide later today some example functionality to work with this issue. — Jimi Pajala, May 08 '18 at 10:45
I would recommend that you have a look at the 3 responses to [this thread](https://stackoverflow.com/questions/35156401/simulate-a-click-and-hold-for-5-sec-on-element-with-jquery). They are using jquery. — Antoine Colson, May 08 '18 at 03:17

score 6 · Answer 1 · answered Jul 31 '19 at 20:09

The following example emulates Android Long press. Put your action after the long press inside the setTimeout:

    var timer;
    //Time of the long press
    const tempo = 1000; //Time 1000ms = 1s
    const mouseDown = () => {
        timer = setTimeout(function(){ 
                //Insert your function here
                alert("Your Function Here!");
        }, tempo);
    };
    const mouseUp = () => {
        clearTimeout(timer);
    };

<p ontouchstart="mouseDown()" ontouchend="mouseUp()" onmousedown="mouseDown()" onmouseup="mouseUp()">Long Touch Me!</p>

score 3 · Answer 2 · answered Feb 22 '15 at 23:39

3

Maybe you can achieve this by using the taphold event from jquery mobile.

http://api.jquerymobile.com/taphold/

answered Feb 22 '15 at 23:39

fons

94
1
4

As an aside, how would I test whether this worked without using a physical phone? – Daniel Kats Feb 23 '15 at 00:34
I think you should be able to test it in a browser if you hold the click button of your mouse for more than 750 ms on the element you want to test the taphold. – fons Feb 23 '15 at 00:41
2

"taphold" doesn't simulate a long press, it simply allows you to specify a callback to be invoked if a long press event occurs. – Bob Arlof Mar 18 '17 at 19:12
4

What about create a custom event with **touchstart** as well as **touchend**? – Anson May 04 '18 at 06:03
In Chrome DevTools it is easy to [simulate a mobile device](https://developers.google.com/web/tools/chrome-devtools/device-mode/). – Antoine Colson May 08 '18 at 03:13

score 3 · Answer 3 · edited Jun 20 '20 at 09:12

I know it isn't exactly the solution that you've been looking for, but it is a solution that worked for me in many web apps. Instead of letting the user copy/paste it by himself, I'm adding a copy button. For the most part, I believe this results in better user experience.

There are a few libraries that do exactly that with a very small footprint that does not rely on Adobe Flash to do so.

I've been using clipboard.js for a while, it works great on mobile as well.

score 3 · Answer 4 · answered May 08 '18 at 15:30

From ecma6 javascript, we can use GlobalEventHandlers, to detect keys and touch events. There is a lot of different handlers for different events.

When the user touch/key/click an element, we can detect it in many ways, but for your exact query, a touch/click event is made of two different actions: ontouchstart and ontouchend.

It basically means that when ontouchend isn't triggered, the user is holding the element by touching, this is a long touch/click.

The following example use onmouseover, onmousleave, ontouchstart and ontouchend events.

shot.onmouseover = (function(){
 console.log("Mouse action started!")
})

shot.onmouseleave = (function(){
 console.log("Mouse action terminated!") 
})


shot.ontouchstart  = (function(){
 console.log("Touch action started!") 
})

shot.ontouchend  = (function(){
 console.log("Touch action terminated!") 
})

#shot {width:100%;min-height:300px;background:red}

<div id="shot">Touch </div>

This is incomplete when speaking about iOS (I am not sure about Android). To long press on an image, you also cannot move your finger. So I believe an `ontouchmove` event should also be tracked. To test this out, go to any image on the mobile web and press (lightly) and hold on an image. If you don't move your finger, the Save Sheet will come up after a couple of seconds. If you do move, it will not come up. — lovelikelando, May 09 '18 at 18:25

Simulate Long Press in Javascript

4 Answers4

Linked