I have a web application that uses an HTML canvas that is made interactive through the use of JavaScript mouse and touch events. Recently, iOS Safari has begun putting the text highlight callout on the canvas if the user long-presses the canvas. Since the canvas is meant to be interacted with on iOS devices, this callout appearing is disruptive to the user experience.
The highlight is appearing on the canvas's fallback text (the contents of the canvas element) even though the browser does support canvas, so the text should not be present. The text is not visible, but copying from the callout adds the canvas fallback text to the clipboard, confirming that this is what the browser is selecting. Removing the text from the canvas element does not stop the callout from appearing, though; it just highlights and allows copying of an empty string.
The issue persists despite my use of these CSS properties on the canvas:
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
Demo of the issue: https://codepen.io/KingDragonhoff/pen/vYKoajK
Image of the callout appearing: https://imgur.com/a/dCm6uPC
How can I stop iOS Safari from showing the highlight callout on the canvas element?
Put canvas to div can solve you problem.
.container {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#canvas {
background-color: firebrick;
}
html {background-color: #3d4359;}
<div class='container'>
<canvas id="canvas" width="400" height="400">This is the canvas fallback text.</canvas>
</div>
Try to check this codepen on safari: https://codepen.io/taimanh229/pen/YzGYLwQ (Pass on iphone 7 ios 13)
You have to create a 'touchstart' event listener and call e.preventDefault() on it.
You must do this even if you are also using Pointer events instead of touch events. It is not enough to cancel those pointer events, even though they are of e.pointerType === 'touch'!
canvas.addEventListener('touchstart', function(e) { e.preventDefault(); });
The problem out here looks to be that the iOS device is assuming there can be something selectable on the page.
If the canvas is the only element that is supposed to be on the page, you can apply the styles to the html element directly.
In this case, adding your styles to the html selector should work for you.
html {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-moz-user-select: -moz-none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
Although, if there is anything else supposed to be on the page, you might have to live with that not being selectable as well.
I've got a bit of an odd one here, I'm trying to stop users from being able to highlight text within a text input but the standard code below isn't working.
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
jsfiddle illustrating the issue - https://jsfiddle.net/z0L4cj3n/7/
When checking the css within the browser, "user-select: none;" is active but isn't making any difference, is there something else in my css overwriting this behaviour? I've even tried adding the above code to the specific input to no result.
Edit: adding
pointer-events: none;
is not an option as I have hover effects and jQuery events being triggered by the inputs.
Try Using
pointer-events: none;
in Css
I'm making a cordova app but today I stumbled on a weird problem. Whenever I close the datepicker (http://materializecss.com/forms.html#date-picker) there is a yellow line at the edge of the webview. (I scrolled a bit down to make it more clear in the picture) screenshot
I initially thought it was because of some highlight feature on touch devices because when I test my app on a browser (chrome), the border isnt there.
In the css I've disabled highlight like this (though it didn't work):
*{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
adding outline:none; in the css did the job.
I have the following rule
.selectable { /* double click -> select (not text-selection) */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
where every property (except cursor) shows with a red squiggly line in the PyCharm editor and the message "Unknown CSS property -webkit-touch-callout..".
I understand that user-select is non-standard, but is there a way to tell PyCharm that I've understood the warning and please stop nagging me about it?
You need to enable Ignore vendor specific CSS properties option:
Here is an interesting CSS questions for you!
I have a textarea with a transparent background overlaying some TEXT that I'd like to use as a sort of watermark. The text is large and takes up a majority of the textarea. It looks nice, the problem is when the user clicks in the textarea it sometimes selects the watermark text instead. I want the watermark text to never be selectable. I was expecting if something was lower in the z-index it would not be selectable but browsers don't seem to care about z-index layers when selecting items. Is there a trick or way to make it so this DIV is never selectable?
I wrote a simple jQuery extension to disable selection some time back: Disabling Selection in jQuery. You can invoke it through $('.button').disableSelection();
Alternately, using CSS (cross-browser):
.button {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
The following CSS code works almost modern browser:
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
For IE, you must use JS or insert attribute in html tag.
<div id="foo" unselectable="on" class="unselectable">...</div>
Just updating aleemb's original, much-upvoted answer with a couple of additions to the css.
We've been using the following combo:
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
We got the suggestion for adding the webkit-touch entry from:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html
2015 Apr: Just updating my own answer with a variation that may come in handy. If you need to make the DIV selectable/unselectable on the fly and are willing to use Modernizr, the following works neatly in javascript:
var userSelectProp = Modernizr.prefixed('userSelect');
var specialDiv = document.querySelector('#specialDiv');
specialDiv.style[userSelectProp] = 'none';
As Johannes has already suggested, a background-image is probally the best way to achieve this in CSS alone.
A JavaScript solution would also have to affect "dragstart" to be effective across all popular browsers.
JavaScript:
<div onselectstart="return false;" ondragstart="return false;">your text</div>
jQuery:
var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);
Rich
You can use pointer-events: none; in your CSS
div {
pointer-events: none;
}
Wouldn't a simple background image for the textarea suffice?
you can try this:
<div onselectstart="return false">your text</div>
WebKit browsers (ie Google Chrome and Safari) have a CSS solution similar to Mozilla's -moz-user-select:none
.no-select{
-webkit-user-select: none;
cursor:not-allowed; /*makes it even more obvious*/
}
Also in IOS if you want to get rid of gray semi-transparent overlays appearing ontouch, add css:
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
Yes, there are multiple ways.
You could simply add the user-select CSS declaration and set it to none, like this
div {
user-select: none;
}
Also you could accomplish this with the CSS ::selection selector and set the selection background color to match your own. This could get tricky.:
p::selection {
background: rgba(0, 0, 0, 0)
}
Option 1 being the best option in most cases for obvious reasons!
Use
onselectstart="return false"
it prevents copying your content.
Make sure that you set position explicitly as absolute or relative for z-index to work for selection. I had a similar issue and this solved it for me.