什么时候可以禁用文本选择？

使用 CSS，可以防止用户使用 user-select: none. 现在，可以理解为什么这样做可能会被认为是“有争议的”。 我是说， 应该 我们正在禁用标准用户行为？ 一般来说，不， 我们不应该那样做. 但是禁用文本选择是否有一些合法的（尽管很少见）用例？ 我认同。

在本文中，我们将探索这些用例并看看我们如何使用 user-select: none 改善（而不是阻碍）用户体验。 这也是一文不值的 user-select 除此以外，财产还有其他价值 none 可以用来改变文本选择的行为而不是完全禁用它，另一个值甚至 强制执行 文本选择，所以我们也会看看那些。

可能 user-select 价值观

让我们从不同的地方开始 user-select 价值观和他们的工作。

应用 user-select: none; 到一个元素意味着它的文本内容和嵌套的文本内容不会在功能上是可选择的或视觉上可选择的（即 ::selection 不会工作）。 如果您要选择包含一些不可选择的内容，则不可选择的内容将从选择中省略，因此实现得相当好。 而且支持很棒。

不利的是， user-select: text 使内容可选择。 您将使用此值覆盖 user-select: none.

user-select: contain 是一个有趣的。 应用它意味着如果选择在元素内开始，那么它也必须在元素内结束，包含它。 奇怪的是，这在选择开始时并不适用 before 然而，这可能是目前没有浏览器支持它的原因。 （Internet Explorer 和早期版本的 Microsoft Edge 以前以 user-select: element.)

user-select: all，选择元素的部分内容会导致所有内容都被自动选择。 全有或全无，这是非常不妥协的，但在用户更有可能将内容复制到剪贴板的情况下（例如共享和嵌入链接、代码片段等）很有用。 用户无需双击，只需单击一次即可自动选择内容。

不过要小心，因为这并不总是您认为的功能。 如果用户只想选择怎么办 部分 内容（例如，只有 Google 字体片段的字体名称部分或代码片段的一部分）？ 还是比较好处理”复制到剪贴板” 在许多场景中使用 JavaScript。

更好的应用 user-select: all 是为了确保报价被完整准确地复制。

的行为 user-select: auto （的初始值 user-select) 取决于元素及其使用方式。 您可以在 我们的年鉴.

现在让我们转向探索用例 user-select: none...

从选择中去除非文本

当您从网页复制内容时，它可能来自文章或其他类型的长格式内容，对吗？ 您可能不希望您的选择包括图像、表情符号（有时可以复制为文本，例如“:thinkingface:”）以及您可能希望在 <aside> 元素（例如文章内的号召性用语、广告或其他不属于主要内容的内容）。

要防止某些内容包含在选择中，请确保将其包装在 HTML 元素中，然后应用 user-select: none 对此：

<p>lorem <span style="user-select: none">🤔</span> ipsum</p>

<aside style="user-select: none">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <a>Call to action</a>
</aside>

在这种情况下，我们不是禁用选择，而是 追求项目的积极优化 它。 还值得一提的是，选择并不一定意味着复制——许多读者（包括我自己）喜欢在阅读内容时选择内容，这样他们就可以记住它们在哪里（比如书签），这是优化而不是完全禁用的另一个原因。

防止误选

使用 user-select: none 到看起来像按钮的链接（例如 <a href="/zh-CN/whatever" class="button">Click Me!</a>).

无法选择 a 的文本内容 <button> or <input type="submit"> 因为，好吧，你为什么要这样做？ 但是，此行为不适用于链接，因为传统上它们构成了应该可选择的段落的一部分。

很公平。

我们可以争辩说 使链接看起来像按钮是一种反模式， 但是无所谓。 它不会破坏互联网，是吗？ 无论如何，那艘船已经航行了，所以如果您使用的链接设计为看起来像按钮，那么它们应该模仿按钮的行为，不仅是为了保持一致性，而且是为了防止用户意外选择内容而不是触发交互。

我当然很容易意外选择东西，因为我在床上使用笔记本电脑的次数比我愿意承认的要多。 此外，有几种医疗状况会影响控制和协调，将预期的点击变成意外的拖动/选择，因此可以通过以下方式解决可访问性问题 user-select 了。

需要拖动（有意）的交互当然也存在（例如在浏览器游戏中），但这些并不常见。 不过，它只是表明 user-select 实际上确实有很多用例。

避免付费内容盗窃

付费墙内容受到很多仇恨，但如果您觉得需要保护您的内容，那就是您的内容 - 没有人有权窃取它，因为他们认为他们不应该为此付费。

如果您确实想走这条路，有很多方法可以让用户更难绕过付费墙（或类似地，复制受版权保护的内容，例如他人的已发表作品）。

使用 CSS 模糊内容：

article { filter: blur(<radius>); }

禁用 DevTools 的键盘快捷键：

document.addEventListener("keydown", function (e) {
  if (e.keyCode == 123) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});

通过禁用上下文菜单本身来禁用通过上下文菜单访问 DevTools：

document.addEventListener("contextmenu", e => e.preventDefault())

当然，为了防止用户在源头不允许阅读内容时复制内容，应用 user-select: none:

<article style="user-select: none">

还有其他用例吗？

这是我可以想到的三个用于防止文本选择的用例。 其他几个人从我脑海中掠过，但他们似乎都有些牵强。 但是你呢？ 您是否必须禁用任何文本选择？ 我想知道！