如何禁用 html 或 JS 中的突出显示？答案

【问题标题】：How can I disable highlighting in html or JS?如何禁用 html 或 JS 中的突出显示？
【发布时间】：2010-11-16 12:03:36
【问题描述】：

我需要在我的网络应用程序上禁用选定文本的突出显示。我有充分的理由这样做，并且知道这通常是一个坏主意。但无论如何我都需要这样做。我是否需要使用 CSS 或 JS 来完成它并不重要。我的主要目的是去除突出显示元素的蓝色。

【问题讨论】：

这个问题目前的形式无法真正回答。是什么导致突出显示？您是在谈论关键字突出显示还是其他内容，例如翻转？我们需要更多信息。
突出显示到底是什么意思？当我左键单击并按住鼠标按钮并拖动文本时，它会突出显示。是这个意思吗？
你的意思是选择吗？就像你在文本上拖动一样？在 IE 中有几种方法可以做到这一点，在其他浏览器中有不同的方法。
浏览器通常会选择灰色或黑色背景，所以你的意思是链接的颜色吗？

标签： javascript html css highlight

【解决方案1】：

您可以将 CSS 伪类选择器 ::selection 和 ::-moz-selection 用于 Firefox。

例如：

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

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

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

【讨论】：

它不会停止选择（如果你需要它至少使用 javascript -> 我使用 jquery：window.onload = function() { document.onselectstart = function() {return false;} // ie document.onmousedown = function() {return false;} // mozilla } U 可能需要额外的脚本来取消键盘快捷键，就像在 Windows CTRL+A 中一样。但同样没有可靠的方法来阻止计算机“专家”复制他们在电脑上看到的东西。
你能用这个吗：stackoverflow.com/questions/826782/…

【解决方案2】：

CSS3 解决方案：

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

还有一个用于用户选择的 webkit 前缀，但它使某些表单字段无法聚焦（可能是一个临时错误），因此您可以使用以下 webkit 伪类代替：

element::selection

【讨论】：

【解决方案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;
}

【讨论】：

这就是我想要的，但它会阻止输入被选中吗？
@jcubed 可能。在中止事件冒泡之前，您需要确保您不在输入或文本区域内。查看我的编辑。

【解决方案4】：

我只是使用 * 来禁用所有元素的突出显示或轮廓突出显示

*{
 outline: none;
}

答案参考：How to remove focus border (outline) around text/input boxes? (Chrome)

【讨论】：

【解决方案5】：

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

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

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

我不确定您必须（取消）设置哪些属性，但我认为您可以通过反复试验找到自己。

另请注意，是否突出显示是特定于浏览器的！

【讨论】：

【解决方案6】：

您的意思是当您将鼠标拖到文本上时突出显示文本？

最好的方法是使用一个名为 ::selection 的 CSS3 属性，但是作为 CSS3，它还没有得到很好的支持。去看看吧，否则也许有办法用 Javascript 来做。

【讨论】：

【解决方案7】：

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

其他一些想法（都不理想）：

一个 java 小程序（您可以控制文本的显示和检索）
在不同的浏览器插件（flash、silverlight 等）中相同
服务器端创建的图像（性能不佳）

【讨论】：

不，我只是不想显示大多数浏览器用来显示突出显示的蓝色内容
我同意将页面的所有部分都视为可选文本是一个有问题的假设。尤其是在实现拖放用户界面小部件时。

【解决方案8】：

使用preventDefault取消selectstart事件：

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


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

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

【讨论】：