javascript - 如何在移动浏览器(Chrome)中禁用 onclick 文本突出显示?

标签 javascript jquery html css bootstrap-4

我正在使用 Boostrap 4 构建一个 Web。一个简单的代码如下:

<div class="col-12 p-2" id="Maincourse">  
  <h1 class="m-0">Main course</h1> 
</div>

我使用我的 Android Chrome 浏览器(版本 80.0.3987.149)点击文本,它会突出显示文本并弹出谷歌搜索。

enter image description here

如何禁用它?我不想设置 user-select: none 因为我需要让用户在长按时突出显示文本。

最佳答案

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

来源 1:https://www.w3schools.com/cssref/css3_pr_user-select.asp
来源 2:https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

版本兼容性

桌面:

Chrome: 54+
Firefox: 69+
Opera: 41+ (15+ with vendor prefix)
Safari: 3+
MS Edge: 12+
IE: 10+

移动

Chrome for Android: 54+
Android web-view: 54+
Firefox for Android: 4+
Opera for Android: 14+
Safari on IOS: 3+

有关更多信息和版本兼容性,请参阅资源。

关于javascript - 如何在移动浏览器(Chrome)中禁用 onclick 文本突出显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60984046/

相关文章:

javascript - 使用 CSS 动画和 jQuery 删除 div 消息

c# - 实现应用程序 HTML 帮助系统

javascript - 鼠标悬停时的元素 id

html - 如何将 4 个盒子集中并排放置?

javascript - 具有多列数据的谷歌折线图工具提示

javascript - 将文本区域的值应用于变量时出现类型错误

javascript - 使用 JavaScript eval() : wondering about code security/vulnerabilities

javascript - 由于图像大小不同,带有幻灯片的 slider 会自行调整大小

javascript - 连接列表的可排序滚动问题

jquery - 当在其上调用 jquery html() 时,内联 block div 向下移动