如何在HTML或JS中禁用高亮显示？

Question

我需要禁用我的网络应用程序上选定文本的高亮显示。我有一个很好的理由这样做，并且知道这通常是一个不好的想法。但无论如何我都需要这样做。使用CSS或JS都可以，最主要的是去除突出显示元素时给出的蓝色颜色。

- John Stimac

---

这个问题在当前的形式下实际上无法回答。是什么导致了高亮显示？你是在谈论关键字高亮显示，还是其他类似于鼠标悬停的东西？我们需要更多的信息。 - zombat

你所说的“highlighting”具体是什么意思？当我左键单击并按住鼠标按钮并拖动文本时，它会被突出显示。这就是你的意思吗？ - Russ Cam

你是指选择吗？就像拖动选中文本一样？在IE中有几种方法可以实现，而在其他浏览器中也有不同的方式。 - Nosredna

浏览器通常选择灰色或黑色背景，所以您是指链接的着色吗？ - Nosredna

Answer 1

你可以使用 CSS 伪类选择器 ::selection 和 ::-moz-selection 来针对 Firefox 进行设置。

例如：

::-moz-selection {
    background-color: transparent;
    color: #000;
}

::selection {
    background-color: transparent;
    color: #000;
}

.myclass::-moz-selection,
.myclass::selection { ... }

- Erv

---

这段内容的意思是：这段代码无法阻止选择，如果需要防止选择，需至少使用 JavaScript，我使用 jQuery。代码的作用是禁止在 IE 浏览器上选择文本和在 Mozilla 浏览器上点击鼠标来选择文本。可能需要额外的代码来取消 Windows 的 CTRL+A 键盘快捷键。但再次说明，没有可靠的方法可以阻止电脑“专家”从他们的计算机上复制某些东西。 - Erv

你可以使用这个链接来禁用文本选择高亮显示：https://dev59.com/pnRA5IYBdhLWcg3wyRF6 - space_balls

Answer 2

CSS3的解决方案：

user-select: none;
-moz-user-select: none;

在user-select属性中也有一个webkit前缀，但它会导致某些表单字段无法聚焦（可能是临时性错误），因此您可以使用以下webkit伪类：

element::selection

- mystrdat

Answer 3

我相信你的意思是选择文本（例如，拖动鼠标以突出显示）。如果是这样，在IE和Mozilla中，这将取消选择操作：

window.onload = function() {
  if(document.all) {
      document.onselectstart = handleSelectAttempt;
  }
  document.onmousedown = handleSelectAttempt;
}

function handleSelectAttempt(e) {
    var sender = e && e.target || window.event.srcElement;
    if(isInForm(sender)) {
        if (window.event) {
            event.returnValue = false;
        }
        return false;
    }
    if (window.event) {
        event.returnValue = true;
    }
    return true;
}

function isInForm = function(element) {
    while (element.parentNode) {
        if (element.nodeName.ToUpperCase() == 'INPUT'
            || element.nodeName.ToUpperCase() == 'TEXTAREA') {
            return true;
        }
        if (!searchFor.parentNode) {
            return false;
        }
        searchFor = searchFor.parentNode;
    }
    return false;
}

- Rex M

---

那正是我想要的，但它会阻止输入被选中吗？ - John Stimac

@jcubed 可能是这样。在中止事件冒泡之前，请确保您不在输入或文本区域内。请参阅我的编辑。 - Rex M

Answer 4

使用 preventDefault 取消 selectstart 事件：

window.addEventListener("selectstart", function(event) {
  event.preventDefault();
});


//one-line version
addEventListener("selectstart", event => event.preventDefault());

<h1>header</h1>
<p>paragraph</p>

- luek baja

Answer 5

我刚刚使用*来禁用所有元素的高亮或轮廓突出显示。

*{
 outline: none;
}

答案参考：如何在Chrome中去除文本/输入框周围的焦点边框（轮廓线）？

- Michael Jay Castillo

Answer 6

我认为你正在寻找:focus伪类。尝试这个：

input:focus {
  background-color: #f0f;
}

当被选中时，它会给你的输入一个漂亮的紫色/粉色。

我不确定你需要设置或取消哪些属性，但我认为你可以通过试错自己找到。

还要注意，高亮或缺失取决于浏览器！

- Erik van Brakel

Answer 7

你是指当你用鼠标拖动时，文本被突出显示吗？

最好的方法是使用CSS3属性::selection，但由于它是CSS3，目前支持不太好。你可以去查一下，否则也许可以用Javascript来实现。

- Karl

Answer 8

如果您的最终目标是使文本的复制和粘贴更加困难，那么JavaScript和CSS不是正确的技术，因为您无法禁用浏览器的查看源代码功能。

一些其他的想法（没有一个是理想的）：

• Java小程序（您可以控制文本的显示和检索）
• 在不同的浏览器插件中实现相同的功能（Flash、Silverlight等）
• 服务器端创建图像（性能较差）

- Josef Pfleger

---

不，我只是不想显示大多数浏览器用于突出显示的蓝色内容。 - John Stimac

我认为把页面的所有部分都视为可选择的文本是一个值得质疑的假设。特别是在实现拖放用户界面小部件时。 - Eric Rini