I have a WooCommerce widget on my website that has several options for user interaction, one of which is by the user clicking on a product picture that is displayed.
I don't want the user to be able to select the picture, so I added custom CSS to disable the pointer events for the ahref DIV of the image. This worked for the desktop version but the picture is still clickable on mobile browsers. I've tested on Safari and Chrome iOS browsers.
After some research, I discovered that touch-action is supposed to disable mobile touch events. I tried adding the following items with my pointer-events CSS to disable mobile interaction, but the image link is still selectable.
-touch-action: none;
-user-select: none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Old version of Firefox */
-ms-user-select: none; /* Internet Explorer or Edge */
user-select: none; /* All modern browsers */
I have tried CSS actions both with and without the - prefix.
I have referenced the following questions without any luck:
Disable DIV selection when clicking on it
how to disable DIV element and everything inside
How to disable touch action for on single HTML Element in iOS
Are there any other CSS actions that I am missing?
It seems that this might be able to be accomplished with a script in the functions.php folder of the site, but the few attempts I've made there haven't been successful.
Script Reference: https://wordpress.stackexchange.com/questions/33724/remove-links-from-images-using-functions-php
Open to other solution methods as well. Thanks!
Related
I'm using Boostrap 4 to build a Web. A simple code such as below:
<div class="col-12 p-2" id="Maincourse">
<h1 class="m-0">Main course</h1>
</div>
I use my Android Chrome Browser(version 80.0.3987.149) click on the text, it will highlighted the text and popup google search.
How can i disable it? I Don't want to set user-select: none because I need to let the user highlight the text when long press.
.disable-select {
user-select: none; /* standard */
-moz-user-select: none; /* firefox specific */
-webkit-user-select: none; /* Chrome, Opera and Safari*/
-ms-user-select: none; /* IE, ms-edge */
}
Source1: https://www.w3schools.com/cssref/css3_pr_user-select.asp
Source2: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
version compatibility
desktop:
Chrome: 54+
Firefox: 69+
Opera: 41+ (15+ with vendor prefix)
Safari: 3+
MS Edge: 12+
IE: 10+
mobile
Chrome for Android: 54+
Android web-view: 54+
Firefox for Android: 4+
Opera for Android: 14+
Safari on IOS: 3+
refer to the sources for more info and version compatibility.
try this:
-webkit-tap-highlight-color: transparent;
I've been doing the user-select: none fix for this for awhile and found it unsatisfactory, so I started searching around for a proper name for the feature in order to see if there was better fix/write-up for it and I came across this Google Developers post from Paul Kinlan (apparently the feature is called "Touch to Search"):
https://developers.google.com/web/updates/2015/10/tap-to-search
which describes the behavior in detail and the various ways in which you can disable or enable the behavior.
Relevant excerpts pertaining to your question:
Tap triggering is enabled for any plain text that is selectable and non interactive or not focusable. When the page has a click handler that responds to a tap on text, Touch to Search automatically detects the response and ignores it since we know the developer intended to handle the event. Using a touch-and-hold gesture to manually select text also triggers the Touch to Search bar. Users can enable or disable the feature using a preference under Chrome's Privacy settings.
As the author of a site there are often times when you don't want a tap gesture on certain element to trigger a search. To ensure that Chrome does what you intend, make those elements:
Focusable: add a tabindex=-1 property on the element.
Interactive: Use any of several standard ways to indicate that an element is interactive:
Use accessibility markup to indicate the element has a widget role, or widget attributes. For example, any element with role=button won't trigger. Adding accessibility markup has the added benefit that your page will be more readable by visually impaired users.
Any JavaScript click handler that calls preventDefault(), or manipulates the DOM or CSS will not trigger Touch-to-Search.
Non-selectable: using -webkit-user-select: none; Non-selectable text will not trigger Touch-to-Search even when using the touch-and-hold gesture.
By adding role="dialog" into the wrapper solved my problem.
But I have no idea why, anyone can explain?
I want to know how to implement the feature I've observed from this site, which is the inability to select/highlight text.
Browsers
Google Chrome
Javascript
Yes, I have tried disabling all Javascript from the site, invalidating Wordpress' plugin and any other script.
CSS
I have tried manipulating CSS via DevTools Elements
I added the style p:focus { background-color: 'somecolor' } but on mouse click+drag, it still doesn't activate focusing. Focusing can be activated by activating :focus in DevTools Elements' force element state.
I tried overriding user-select's value from none to text, and even disabling the user-select attribute entirely.
HTML
I tried to strip the elements' HTML attributes so they'd be simple <p>...</p> tags
On Firefox
You can focus on mouse click+drag by enabling reader view!
Question
Since I've tried disabling Javascript, and manipulated the CSS and HTML. I've ran out of areas to isolate. Does anybody know how the unfocusable/unselectable was implemented?
I think you are looking for the user-select style. You can use it to disable selectable text. The support varies, but coverage is pretty good with -webkit etc. From w3schools:
.unselectable {
-webkit-user-select: none; /* Chrome, Opera, Safari */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
}
When I'm trying to select text with the mouse on my website with internet explorer (IE10 and IE11), I just can't figure out why
By default Ionic is disabled text selection. I am overriding ionic classes with following code.
body{
-moz-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
-o-user-select: text;
user-select: text;
}
It is working for chrome, firefox and opera, but not working for IE.
Does have anybody an idea how to fix this? I've already search for similar problem but no answer.
Thanks all for answers
I have a textbox that's being automatically focused with jQuery when an element is clicked:
my_item.find('input').focus();
It works in Firefox and Chrome as expected: the input area is focused and I can begin typing in it. In Safari the behavior is different though. I click the element, the input is focused, I start to type in the box, and it only lets me type one character. After the first character of input is typed, the input box loses focus and further typing doesn't work unless it's manually clicked for focus again.
I've found questions about focus() and Safari working strangely but I think this is a different issue. I've tried the solutions suggested there, such as e.preventdefault() on mouseup and similar, with no effect.
How can I get my focused text input area to remain focused while I'm typing in Safari?
The question is a bit old, but i recently had the same problem so this is what i´ve found.
Check if your css rules blocks the touch callout.
If you have any rule like this try to remove and then try typing again
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
I am using the phonegap api, to create a native iPhone application. However when creating links between pages, if you hold down the links for a few seconds a popup comes up asking you if you wish to open or copy the links. I was wondering how I could disable these popups from coming up, to make the application run more smoothly etc?
I know this is almost a year ago, but I thought I could share some thought.
the suggestion is a good one, but it doesn't quite work for me working with Cordova 2.2 and JQM 1.2. Tapping and holding on a button or a tab (actually a link, A element), the actionsheet still pops up from the bottom of the screen (of an iphone, let's say).
This is what that does it for me:
.yourclassname {
-webkit-touch-callout: none;
}
You can disable it entirely, or only for links.
Set it in the CSS for links:
.class_name {
-webkit-user-select: text;
}
Or for everything:
.class_name {
-webkit-user-select: none;
}