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

Posted 2023-03-06

【中文标题】如何禁用 html 或 JS 中的突出显示？

【英文标题】：How can I disable highlighting in html or JS?

【发布时间】：2010-11-16 12:03:36

【问题描述】：

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

【问题讨论】：

这个问题目前的形式无法真正回答。是什么导致突出显示？您是在谈论关键字突出显示还是其他内容，例如翻转？我们需要更多信息。

突出显示到底是什么意思？当我左键单击并按住鼠标按钮并拖动文本时，它会突出显示。是这个意思吗？

你的意思是选择吗？就像你在文本上拖动一样？在 IE 中有几种方法可以做到这一点，在其他浏览器中有不同的方法。

浏览器通常会选择灰色或黑色背景，所以你的意思是链接的颜色吗？

【参考方案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 中一样。但同样没有可靠的方法来阻止计算机“专家”复制他们在电脑上看到的东西。

你能用这个吗：***.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>