Preventing default context menu on longpress / longclick in mobile Safari (iPad / iPhone)
Thanks to JDandChips for pointing me to the solution. It works perfectly in combination with the longclick plugin. For documentation sake I'll post my own answer to show what I did.
HTML:
<script type="text/javascript"
src="https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js"></script>
<p><a href="http://www.google.com/">Longclick me!</a></p>
The Javascript already was OK:
function longClickHandler(e){
e.preventDefault();
$("body").append("<p>You longclicked. Nice!</p>");
}
$("p a").longclick(250, longClickHandler);
The fix was to add these rules to the style sheet:
body { -webkit-touch-callout: none !important; }
a { -webkit-user-select: none !important; }
Disabled context menu example.
Update: the jQuery Longclick plugin seems to work only in Safari on the iPad, not in Google Chrome! I'm looking into that at the moment.
Update 2: I've embedded the Longclick Javascript in the source of the Fiddle because I was getting the following error in Chrome (due to https
):
Refused to execute script from 'https://raw.github.com/pisi/Longclick/master/jquery.longclick-min.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
See the updated version: http://jsfiddle.net/z9ZNU/53/
<style type="text/css">
*:not(input):not(textarea) {
-webkit-user-select: none; /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}
</style>
If you want disable only anchor button tag use this:
a {
-webkit-user-select: none; /* disable selection/Copy of UIWebView */
-webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}
A quick css solution:
html {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
user-select disables highlighting text/areas.
touch-callout disables context menu popup.