How to Disable onclick text highlight in mobile browser (Chrome)? - javascript

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?

Related

Error Disabling User Interaction with DIV Element on Mobile Browsers

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!

How to disable/remove specific controls in the UI of safari native video player in fullscreen mode?

When going fullscreen in IOS safari mobile (IOS 16), I have a case where I want to remove the option for the subtitle selector due to a certain issue with the video source.
I've used the safari remote inspector and noticed the shadow DOM inside the video tag, however after experimenting with many pseudo selectors, none had an effect to hide any of the controls.
audio::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
video::-webkit-media-controls-toggle-closed-captions-button {
display: none;
}
However I recently noticed that youtube in safari has managed to hide the option entirely when going fullscreen, see attached image below
So is it possible to customize the native controls for IOS in fullscreen mode?

What are all the ways to disable focusing on HTML elements?

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 */
}

No outline on focused inputs in Firefox

It seems Firefox no longer displays an outline/highlight on focused elements. When I searched this topic, I got the impression that Firefox did this in the past by default, but discontinued it. Chrome, on the other hand, outlines the selected input with a light blue border:
I'm trying to create a Greasemonkey script in Firefox that allows users to scroll through checkboxes/radio buttons using the arrow keys. Whichever input is focused should be highlighted so users know it is selected.
Is there anyway to do this in the browser itself, i.e. make it so Firefox highlights the selected elements on pages by default? (Other than downloading a previous version of Firefox or adding CSS to my web site (I need this to work across sites))
I'm using Firefox 40.0.1 and Chrome 55.0.2883.87
Add input {outline-style: auto} in CSS file

designMode or contentEditable on mobile safari [duplicate]

Safari HTML Reference: Supported Attributes says:
contenteditable
If true, the element can be edited on
the fly; if false, it cannot.
Availability
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
However, on my iPhone, I can't get it to work. Anyone have success with this?
You can try it with this document (admittedly not pure html, but that document works in desktop Safari, and Chrome and Firefox 3). I haven't been able to get even the simplest html document to be editable in mobile Safari.
contenteditable has been added to iOS 5 beta 2, according to one of the developer videos from WWDC 2011. I suggest signing up to Apple's Safari developer program and downloading that video from the WWDC videos page.
If you sign up to be a Safari dev, you also gain the privilege to submit your Website to their online iOS Web app gallery.
Edit: I've confirmed this works on my iPad running iOS 5.0.1. Try it out here: http://www.quirksmode.org/dom/execCommand/
It works, kind of. I thought contenteditable doesn't work on iPhone before. When I set a div to contenteditable I couldn't move the cursor/pointer to where I wanted to move it. But, when I was fiddling around XHTML with contentEditable within iBooks.app on iPad, I found that "execCommand('insertText', null, 'foobar');" worked within Mobile Safari.
If you wanted to, you could make a virtual keyboard using
clever css and javascript, and make it into a bookmarklet.
If you cannot focus the contenteditable element try adding this to your css
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
The design mode and content editable are working fine in IOS 5.But in previous versions it is not working.There is post
http://mobile.tutsplus.com/tutorials/mobile-web-apps/safari-5_html5/
I think this is because editing HTML requires quite an advanced user interface. That's why desktop Safari implements it, while Mobile Safari doesn't.

Categories