Prevent Copy image in iOS web application

Question

Is there a way of preventing the menu that appears when you hold down a finger on an image on an iPad or iPhone web application. I am creating a remote control and I use the ontouchstart and ontouchend built in functions to create my "ontouchhold" function that I implemented. That function uses the ontouchstart and ontouchend built in functions to send IR signals via my computer which is acting as the server meanwhile the user is holding down its finger against an image (the ontouchend function will clear the interval). The only problem is that if the user holds its finger to long then the javaScript function ontouchhold that I implemented stops working because a menu pops up asking the user if he wants to copy/save the image. It will be nice if I could prevent this menu from appearing.

I predict this question will suddenly get more traffic with ios16! They seem to have reduced the amount of time before an item will start the ‘copy animation’. Curious if others have noticed this - if you’re finding this page after installing iOS 16 it’s not just you! — Simon_Weaver, Sep 12 '22 at 05:51

score 5 · Answer 1 · answered Jul 07 '11 at 12:03

5

You can use:

-webkit-user-select: none;

This property makes the html elements not be not selectable and thus prevents that copy behaviour of iphone

answered Jul 07 '11 at 12:03

Varun Goel

339
3
15

4

OP is asking about iOS web applications. – Blaise Oct 25 '12 at 10:02
This does not prevent the copy/save dialog pop up from opening on iOS7. Please see my answer. – leojh Jan 30 '14 at 18:06

score 3 · Answer 2 · answered Jan 30 '14 at 18:08

-webkit-touch-callout: none; seems to do the trick of only preventing the copy/save dialog from opening without disabling any other events.

pointer-events: none; will also prevent the copy/save dialog but will also prevent any other dependent events attached to the image

score 1 · Answer 3 · answered May 24 '11 at 10:51

1

You can add a preventDefault() to the element, which prevents the copy menu:

// HTML
<img scr="screenshot.jpg" id="dontshowcopy" />

// JS
element = document.getElementById('dontshowcopy');

element.addEventListener("touchstart",   preventCopy, false); // simple touch events
element.addEventListener("gesturestart", preventCopy, false); // events with more than one finger

function preventCopy(event) {
    event.preventDefault();
}

But it also prevents the scrolling when the swipe event was started on this element.

answered May 24 '11 at 10:51

powtac

40,542
28
115
170

1

Thanks! In my case, that's the only solution that worked. (I'm using touchstart on a div with an image inside, removing the events altogether was also removing the touchstart, other options would still have the copy menu appear) – Antoine Mouquod Mar 28 '17 at 14:52

score 0 · Accepted Answer · answered Apr 11 '11 at 01:47

0

I don't know about iOS or mobile phones: but if you make the image a background image, it doesn't usually give you the option to save .....

answered Apr 11 '11 at 01:47

Lathan

853
4
14

yeah that works great the only problem is that I don't know how to place the background image on top of another image. I already tried changing the z-index but it does not seem to work with the z-index. – Tono Nam Apr 11 '11 at 17:52
I changed my whole css but I guess it was the only solution that I could find. – Tono Nam May 11 '11 at 04:25
overlapping background images is very tricky, even in regular browsers... I'm afraid I can't help you... – Lathan May 17 '11 at 18:42
You can do that easily using ``. Those spans you can just overlap. (However, I prefer the user-select answer) – Blaise Oct 25 '12 at 10:05

Prevent Copy image in iOS web application

4 Answers4