CODEWITHSUNDEEP
ipadweb-applications
Tina
Tina

Reputation: 491

Disable "save image" in iOS web application

I want to disable the "save image" menu in mobile web applications that appears when you hold down a finger on an image. I tried the CSS properties:

-webkit-user-select: none;
-webkit-touch-callout: none;

With "-webkit-user-select" the copy menu is disabled but not the one for saving images. "-webkit-touch-callout" seems not to be working (tried on iPad2).

I also tried this javascript:

$('img').live('touchstart,touchmove,touchend', function() {
  event.preventDefault();
});

But without any effect.

Any suggestions? Thanks in advance!

Upvotes: 20

Views: 17136

Answers (4)

Nikita
Nikita

Reputation: 1853

nothing worked for me except of removing the long press gesture recogniser:

for (UIView *subView in self.webView.scrollView.subviews) {
    for (UIGestureRecognizer *recogniser in subView.gestureRecognizers) {
        if ([recogniser isKindOfClass:UILongPressGestureRecognizer.class]) {
            [subView removeGestureRecognizer:recogniser];
        }
    }
}

Upvotes: 0

zanona
zanona

Reputation: 12717

I believe in this case pointer-events is your friend. You can simply add: 

<img src="path/to/image.png" style="pointer-events:none" alt="">

And you should be good to go.

Upvotes: 30

Cameron
Cameron

Reputation: 1067

-webkit-touch-callout is working for me. I used it on the body instead of the img

Upvotes: 3

Josh
Josh

Reputation: 11070

Well one thing you could do is cover the image with a transparent <div> tag. This would prevent the user form "clicking" (touching) the image at all:

<div style="position:relative;">
  <img src="something.png">
  <div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;z-index:1000"></div>
</div>

Note that if you send images to the browser they can be saved. This is just a workaround, a minor annoyance for anyone who really wants the images. If you can view it, you can copy/steal it.

Upvotes: 2

Related Questions