26

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

4

8 回答 8

23

您可以使用 CSS 伪类选择器::selection和::-moz-selectionFirefox。

例如：

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

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

.myclass::-moz-selection,
.myclass::selection { ... }
于 2009-08-03T20:48:16.503 回答
15

CSS3 解决方案：

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

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

element::selection
于 2012-04-04T13:35:20.117 回答
5

我相信您的意思是选择文本（例如拖动鼠标以突出显示）。如果是这样，这将取消 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;
}
于 2009-08-03T20:30:42.967 回答
1

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

*{
 outline: none;
}

答案参考：如何去除文本/输入框周围的焦点边框（轮廓）？（铬合金）

于 2020-06-01T14:41:07.977 回答
0

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

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

选择后，它将为您的输入提供漂亮的紫色/粉红色。

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

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

于 2009-08-03T20:31:13.730 回答
0

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

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

于 2009-08-03T20:41:43.987 回答
0

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

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

  • 一个 Java 小程序（您可以控制文本的显示和检索）
  • 在不同的浏览器插件中相同（flash、silverlight 等）
  • 服务器端创建的图像（性能差）
于 2009-08-03T20:42:31.507 回答
0

使用取消selectstart事件preventDefault：

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


//one-line version
addEventListener("selectstart", event => event.preventDefault());
<h1>header</h1>
<p>paragraph</p>

于 2021-01-13T02:49:01.760 回答