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.
Related
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 am currently exploring web apps for iOS devices and use PhoneGap to create a "native" application out of it. The problem I have with this is the magnifying glass, that I don't want to be shown when selecting paragraphs (or bit of text). I have tried a lot of solutions but nether works. I use this CSS to disable all copy, selection and such for those fields I wan't:
*[untouchable] {
-webkit-user-drag: none;
-webkit-user-modify: none;
-webkit-highlight: none;
-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;
}
This works fine, but it still shows the magnifer/loupe when I touch and hold on text:
Is there a real solution to this? It would be awesome with a simple CSS property such like -webkit-magnifier: none or something like that. If there's a JavaScript solution, that would be fine too, but maybe a overkill.
Since I am using PhoneGap and it uses UIWebView to show the page, there might be a way of disabling the magnifier for that - but I haven't looked that much into the native source.
Thanks in advance :-)
The only way to accomplish this is to rid elements completely of selection since the magnifier is incorporated. -webkit-user-select:none; should be applied to all elements where you don't want the magnifier to appear.
This is what I used
* {
-webkit-touch-callout: none;
-webkit-user-callout: none;
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-user-modify: none;
-webkit-highlight: none;
}
I listen for click events inside an html5 canvas and it works just fine. However, when I click anywhere on the image the browser highlights it as if it were selected (similar to how an image might look highlighted if clicked on a page). I was curious if anyone knew how to disable selecting of html elements such as canvas. I don't want the canvas to appear outlined when someone clicks it.
Going on bebraw, go wild with CSS styles and add this in the head:
<style type="text/css">
canvas {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}
</style>
You could try applying a few CSS rules along these:
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
As Michael mentioned jQuery's disableTextSelect is worth checking out. Even if you don't end up using it, studying the source might give some insight.
Only the last of those css rules seemed to do it. The other rules together didn't work (on Safari iOS5) until I added the last one.
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
I'd use jQuery.$('.noSelect').disableTextSelect();
Somewhat related: if the problem is that the cursor becomes the selection icon (eg. when dragging on the canvas), you can disable that by either this CSS on the canvas:
cursor: default;
or preventing the event's default behavior in the mousedown handler:
event.preventDefault();
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.