如何在 CSS 中禁用文本选择

Posted on by

在网页上，我们通常不应该禁用文本选择，但在某些情况下启用它会影响用户体验。通常，我们不想剥夺用户选择文本的能力，因为这会导致糟糕的用户体验。曾经有一段时间，少数网站会阻止用户复制文章文本作为阻止抄袭的一种方法，但幸运的是，这种情况在今天已经不常见了。

话虽如此，有很多例子表明禁用文本选择实际上可以改善用户体验。例如：

  • 在触发事件的 HTML 元素上，尤其是在移动设备上 – 点击或双击可能会导致文本选择
  • 在拖放界面上，用户必须拖动元素 – 我们不希望该拖动也触发文本选择。
  • 在许多其他自定义 Web 构建的用户应用程序中，文本选择需要仅限于某些元素或情况。例如，在文本编辑器上，我们通常不希望使文本变为粗体的按钮是可选的，因为它是一个按钮。

如果您决定禁用文本选择，幸运的是，有一种简单的方法可以在 CSS 中完成此操作。

如何在 CSS 中禁用文本选择#

所有现代浏览器（某些版本的 Safari 除外）都支持该user-select属性，这使得任何 HTML 元素都无法选择。例如，如果您希望所有按钮都不可选，您可以编写以下内容：

button {
    -webkit-user-select: none;
    user-select: none;
}

我们必须使用-webkit-user-select，因为 Safari 仍然需要它。如果您想支持 Internet Explorer（越来越少见），您还可以使用-ms-user-select：

button {
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

这个单一属性将停止用户选择。user-select理论上，它还具有其他属性，但对这些属性的支持各不相同。

  • user-select: none– 没有用户选择元素。
  • user-select: text– 您只能选择元素内的文本
  • user-select: all– 点击一次将选择整个元素内容。
  • user-select: auto– 默认情况下，您可以像往常一样选择所有内容。

您可以在 caniuse 上找到支持用户选择的完整最新列表。

为了向您展示每种方法的工作原理，以下是一些示例。请注意，两者text都all支持有限的 Safari，因此请考虑在 Chrome 中尝试这些。

用户选择设置为无

这相当于user-select: none.

您将无法选择此文本！

用户选择设置为全部

这相当于user-select: all.

点击一次将导致您选择所有文本。

用户选择设置为文本

这个例子与user-select: auto.

您将只能选择此元素中的文本。

推荐阅读：