如何禁用移动浏览器（Chrome）中的 onclick 文本突出显示？

Question

基本上

var cell = document.createElement("div")

cell.innerHTML = `

           <div style=" display: inline-block; width: 270px; height: 270px; background: url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;">

               <textarea id="ff" style="border: unset; background: unset; resize: unset; width: 80%; height: 60% ; margin-top: 20px; margin-left: 17px; padding: 10px;"></textarea>

               <div style="display:inline-block;">

               <input id="mr"  type="date">

               <input id="mc"  type="time">

               </div>

           </div>`

基本上做同样的事情

我怎样才能禁用它？我不想设置，user-select: none因为我需要让用户在长按时突出显示文本。

Answer 1

.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 */}版本兼容性desktop:Chrome: 54+Firefox: 69+Opera: 41+ (15+ with vendor prefix)Safari: 3+MS Edge: 12+IE: 10+mobileChrome for Android: 54+Android web-view: 54+Firefox for Android: 4+Opera for Android: 14+Safari on IOS: 3+请参阅来源以获取更多信息和版本兼容性。

Answer 2

我已经user-select: none为此修复了一段时间，发现它并不令人满意，所以我开始搜索该功能的正确名称，以便查看是否有更好的修复/编写，我遇到了这个 Google Developers Paul Kinlan 的帖子（显然该功能称为“触摸搜索”）：https://developers.google.com/web/updates/2015/10/tap-to-search其中详细描述了该行为以及禁用或启用该行为的各种方法。与您的问题相关的相关摘录：对于任何可选择且非交互式或不可聚焦的纯文本，都启用点击触发。当页面具有响应文本点击的点击处理程序时，触摸搜索会自动检测响应并忽略它，因为我们知道开发人员打算处理该事件。使用触摸并按住手势手动选择文本也会触发触摸搜索栏。用户可以使用 Chrome 隐私设置下的首选项来启用或禁用该功能。作为网站的作者，您经常不希望在某些元素上点击手势来触发搜索。为了确保 Chrome 实现您的预期，请制作以下元素：可聚焦：在元素上添加 tabindex=-1 属性。交互式：使用几种标准方法中的任何一种来指示元素是交互式的：使用辅助功能标记来指示元素具有小部件角色或小部件属性。例如，任何具有 role=button 的元素都不会触发。添加辅助功能标记还有一个额外的好处，即您的页面对于视障用户来说更容易阅读。任何调用 PreventDefault() 或操作 DOM 或 CSS 的 JavaScript 单击处理程序都不会触发 Touch-to-Search。不可选择：使用 -webkit-user-select: none;&nbsp;即使使用触摸并按住手势，不可选择的文本也不会触发触摸搜索。

Answer 3

通过添加role="dialog"到包装器中解决了我的问题。但我不知道为什么，谁能解释一下？

Answer 4

尝试这个：-webkit-tap-highlight-color:&nbsp;transparent;