如何禁用 html 或 JS 中的突出顯示？

Question

我需要在我的網絡應用程序上禁用所選文本的突出顯示。 我有一個很好的理由這樣做，並且知道這通常是一個壞主意。 但無論如何我都需要這樣做。 如果我需要使用 CSS 或 JS 來做到這一點並不重要。 我的主要目的是去除高亮元素的藍色。

Answer 1

您可以為 Firefox 使用 CSS 偽類選擇器::selection和::-moz-selection 。

例如：

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

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

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

Answer 2

CSS3 解決方案：

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

用戶選擇還有一個 webkit 前綴，但它使某些表單字段無法聚焦（可能是一個臨時錯誤），因此您可以使用以下 webkit 偽類：

element::selection

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;
}

Answer 4

我只是使用 * 禁用所有元素的突出顯示或輪廓突出顯示

*{
 outline: none;
}

答案參考： 如何去除文本/輸入框周圍的焦點邊框（輪廓）？ （鉻合金）

Answer 5

我認為您正在尋找 :focus 偽類。 試試這個：

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

選擇后，它會給你的輸入一個漂亮的紫色/粉紅色。

我不確定您必須（取消）設置哪些屬性，但我認為您可以通過反復試驗找到自己。

另請注意，突出顯示與否取決於瀏覽器！

Answer 6

當您將鼠標拖到文本上時，您的意思是突出顯示文本嗎？

最好的方法是使用名為 ::selection 的 CSS3 屬性，但是作為 CSS3，它還沒有得到很好的支持。 繼續查找，否則也許有一種方法可以使用 Javascript 來完成。

Answer 7

如果您的最終目標是使文本的復制和粘貼更加困難，那么 Javascript 和 CSS 就不是正確的技術，因為您無法禁用瀏覽器的查看源功能。

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

• 一個 Java 小程序（您可以控制文本的顯示和檢索）
• 在不同的瀏覽器插件（flash、silverlight 等）中相同
• 服務器端創建的圖像（性能不佳）

Answer 8

使用preventDefault取消selectstart事件：

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

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