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?

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?

• javascript
• android
• ios
• mobile

• stackoverflow.com/questions/6139225/… – justMe Commented May 7, 2018 at 13:40
• you should try this stackoverflow.com/questions/4669464/… – MennyMez Commented May 7, 2018 at 14:01
• I would recommend that you have a look at the 3 responses to this thread. They are using jquery. – Antoine Colson Commented May 8, 2018 at 3:17
• 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 Commented May 8, 2018 at 10:45

4 Answers 4

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>

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

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

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>

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.