CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
hendry91
hendry91

Reputation: 93

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

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.

enter image description here

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.

Upvotes: 3

Views: 5084

Answers (4)

Hyperx837
Hyperx837

Reputation: 833

.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.

Upvotes: 4

SheffDoinWork
SheffDoinWork

Reputation: 783

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:

  1. Focusable: add a tabindex=-1 property on the element.
  2. 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.
  3. Non-selectable: using -webkit-user-select: none; Non-selectable text will not trigger Touch-to-Search even when using the touch-and-hold gesture.

Upvotes: 2

Moddoo
Moddoo

Reputation: 31

try this:

-webkit-tap-highlight-color: transparent;

Upvotes: 2

hendry91
hendry91

Reputation: 93

By adding role="dialog" into the wrapper solved my problem. But I have no idea why, anyone can explain?

Upvotes: 2

Related Questions