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

禁用文本选择突出显示通常指的是防止用户能够通过鼠标或其他输入设备选择页面上的文本。这样做有时是为了改善用户界面的体验或防止用户轻易复制网站内容。这可以通过多种方式实现，而最常见的方法是使用CSS或JavaScript。

通过CSS禁止文本选择：

可以使用CSS的 user-select 属性来控制哪些元素上的文本可以被用户选择。例如，要在整个网页上禁止文本选择，您可以在网页的样式表中添加以下CSS规则：

css
/* 禁止页面上的所有文本选择 */
body {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* 标准语法 */
}

如果只想针对特定元素禁止选择文本，您可以将选择器从 body 更改为您想要的特定类、ID或元素。

通过JavaScript禁止文本选择：

虽然CSS方法简单易用，但如果您需要更多控制，例如在用户进行特定操作后禁止文本选择，可以使用JavaScript。以下是如何执行此操作的一个例子：

javascript
// 禁止文本选择的函数
function disableTextSelection() {
  document.onselectstart = function() { return false; };     // 针对IE
  document.onmousedown = function() { return false; };       // 针对其他浏览器
}

// 启用文本选择的函数
function enableTextSelection() {
  document.onselectstart = function() { return true; };      // 针对IE
  document.onmousedown = function() { return true; };        // 针对其他浏览器
}

// 当文档加载完成时禁用文本选择
document.addEventListener('DOMContentLoaded', function() {
  disableTextSelection();
});

// 如果需要在某些动作后重新启用文本选择，可以调用 enableTextSelection() 函数

通过以上方法，可以在需要的时候禁止或允许文本选择。但请注意，禁用文本选择可能会影响用户体验，并且并不能完全防止内容被复制（例如，用户可能通过查看网页源码来复制文本），应谨慎使用。

2017 年 1 月更新：

根据Can I use 的说法，Safari 的user-select+足以在所有主要浏览器中实现所需的行为。-webkit-user-select

---

这些是所有可用的正确 CSS 变体：

shell
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

运行代码片段Hide results

展开片段

---

请注意，这user-select是在标准化过程中（目前在W3C 工作草案中）。它不能保证在所有地方都能工作，并且浏览器之间的实现可能存在差异。此外，浏览器将来可能会放弃对其的支持。

---

更多信息可以在Mozilla 开发者网络文档中找到。

该属性的值为none、text、toggle、element、elements和all。inherit

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

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

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

对于 Internet Explorer < 10 和Opera < 15，您将需要使用unselectable您希望不可选择的元素的属性。您可以使用 HTML 中的属性来设置它：

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

遗憾的是，这个属性不是继承的，这意味着您必须在<div>.如果这是一个问题，您可以使用 JavaScript 为元素的后代递归地执行此操作：

shell
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 。

---

这仍然没有涵盖所有可能性。虽然不可能在不可选择的元素中启动选择，但在某些浏览器（例如 Internet Explorer 和 Firefox）中，仍然不可能阻止在不可选择的元素之前开始和之后结束的选择，而不会使整个文档变得不可选择。

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

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

没有符合“标准”的快速简便的方法来做到这一点；使用 JavaScript 是一种选择。

真正的问题是，为什么您希望用户无法突出显示以及复制和粘贴某些元素？我从来没有遇到过不想让用户突出显示我网站的某个部分的情况。我的几个朋友在花费大量时间阅读和编写代码后，会使用突出显示功能来记住他们在页面上的位置，或者提供一个标记，以便他们的眼睛知道下一步该看哪里。

我认为这是有用的唯一地方是，如果您有表单按钮，如果用户复制并粘贴网站，则不应复制和粘贴这些按钮。

Internet Explorer 的 JavaScript 解决方案是：

shell
onselectstart="return false;"

如果您想禁用除元素之外的所有内容的文本选择<p>，您可以在 CSS 中执行此操作（注意-moz-none允许在子元素中覆盖，这在其他浏览器中是允许的none）：

shell
* {
    -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;
}