如何禁用文本选择突出显示?

对于像按钮(例如,堆栈溢出页面顶部的问题标签用户等)或选项卡那样起作用的锚点,如果用户意外地选择文本,是否有CSS标准方法来禁用突出显示效果?

我意识到这可以通过JavaScript来完成,并且有一点Google使用Mozilla的-moz-user-select选项。

有没有一种符合标准的方法可以用CSS来实现,如果不是,那么“最佳实践”方法是什么?


更新2017年1月:

根据我的使用情况user-select目前除Internet Explorer 9和更早版本以外的所有浏览器都支持此功能(但可惜需要供应商前缀)。


所有正确的CSS变体是:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

请注意,这是一个非标准功能(即不是任何规范的一部分)。不能保证在任何地方都能正常工作,并且浏览器之间的实现可能会有所不同,并且在将来,浏览器可能会放弃对它的支持。

更多信息可以在Mozilla Developer Network文档中找到

在大多数浏览器中,这可以通过使用专有的CSS user-select属性变体来实现,最初提出然后放弃在CSS3中,现在在CSS UI Level 4中提出:

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

对于IE <10和Opera <15,您将需要使用unselectable您希望取消选择的元素的属性。您可以使用HTML中的属性来设置它:

<div id="foo" unselectable="on" class="unselectable">...</div>

可悲的是,这个属性并没有被继承,这意味着你必须在每个元素的开始标签中放入一个属性<div>。如果这是一个问题,您可以改用JavaScript来为元素的后代递归执行此操作:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

2014年4月30日更新:无论何时将新元素添加到树中,都需要重新运行树遍历,但从@Han的评论看来,可以通过添加mousedown设置unselectable目标的事件处理程序来避免这种情况的事件。有关详细信息,请参阅http://jsbin.com/yagekiji/1


这仍然不包括所有可能性。尽管无法在不可选元素中启动选择,但在某些浏览器(例如IE和Firefox)中,仍然不可能阻止在不可选元素之前和之后开始的选择,而不会使整个文档不可选。


IE的JavaScript解决方案是

onselectstart="return false;"


在CSS 3的用户选择属性变为可用之前,基于Gecko的浏览器支持-moz-user-select您已经找到的属性。WebKit和基于Blink的浏览器支持该-webkit-user-select属性。

这当然不支持不使用Gecko渲染引擎的浏览器。

没有“标准”兼容的快速简单的方法来做到这一点; 使用JavaScript是一种选择。

真正的问题是,为什么你想让用户无法突出显示并假设复制和粘贴某些元素?我没有遇到过一次,我不想让用户突出显示我的网站的某个部分。我的几位朋友花了很多时间阅读和编写代码后,将使用高亮功能作为记录他们所在页面上的位置的方式,或者提供一个标记以便他们的眼睛知道下一步的位置。

我可以看到这个有用的唯一的地方是,如果你有表单的按钮,如果用户复制并粘贴网站,不应复制和粘贴。


如果你想在除了<p>元素之外的所有东西上禁用文本选择,你可以在CSS中做到这一点(注意-moz-none它允许在其他浏览器中允许覆盖的子元素none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

添加评论

友情链接:蝴蝶教程