html - 电话间隙：禁用 web 视图中的文本选择

Question

我正在做一个电话差距项目。我正在使用 HTML、JAVA SCRIPT 和 CSS。

我已经在我的项目中实现了 onclick、mapping 和 ahref 功能。在将此功能用于 onclick 或映射或 ahref 时——在选择图像或文本时，它会突出显示。

我不希望它突出显示。我尝试实现以下代码

noSelect 
{
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
   user-select: none;
}

但是，此代码在选择视图中没有任何区别。

所以，请建议我一种方法来处理这个问题并解决我的问题。

编辑：

这就是我在映射和图像中使用它的方式，但它不起作用。

映射

<div id="main" class="main" ><img src="img/abc.png" alt="abc" usemap="#abc" class="noSelectInputBox:focus"/></div>

图片来源

document.getElementById("detail").innerHTML = '<img src="img/image1.png" onclick="detail()" class="noSelectInputBox:focus"/> '

score 1 · Accepted Answer

尝试将以下CSS添加到您的：

noSelectInputBox:focus
{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    outline:none;
    -webkit-focus-ring-color:rgba(0 0 0 0);
}

希望有帮助。

score 0 · Accepted Answer

在您的 css 文件中编写以下代码。使用它时，我们可以禁用突出显示触摸内容。

*{
    /* Prevent any object from being highlighted upon touch event*/
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

2 回答 2