强制选择文本块

您是否曾经看到（或将自己）一些文本放入一个 <textarea> 或 <input> 中，不是因为它属于表单的一部分，而是因为它使得整个文本块更容易选择。 这样的输入具有选择边界，这意味着您可以单击它们并（例如）全部选择并仅获取输入内的文本。

有一个 CSS 属性允许我们做到这一点，而无需使用不那么语义合适的表单输入。

它是 user-select 属性，它按以下方式工作

.force-select-all {
  user-select: all;
}

Autoprefixer 会为您处理此操作，但如果手动操作，您需要以下内容才能获得最佳浏览器支持

.force-select-all {
  -webkit-user-select: all; /* Covers Blink-land & Firefox (yup) */
  user-select: all; /* Someday */
}

您问的示例？

我发现这种东西最常见的用例是“这里有一些服务器生成的、可复制粘贴的用于我们产品™的嵌入代码”。 想象一下 YouTube 或 Vimeo 视频的嵌入代码

在我以前那个 HTML-Ipsum 这样的网站上，它非常有意义，它急需更新。

一个演示

如何使用稍微不同的用例，比如一张备忘单，其中包含一些旨在复制的简单代码片段

查看 Pen SVG 形状备忘单 (user-select: all; 演示) by Chris Coyier (@chriscoyier) on CodePen.

关于前缀的更多信息

实际上，Autoprefixer 会为您提供

.force-select-all {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

这是可以理解的，因为

1. 只为 Firefox 放入 -webkit- 很奇怪，即使它接受它
2. Edge 不支持 all，但它支持带有前缀的 none，因此它始终为该属性添加前缀

假设您不喜欢强制选择，但喜欢选择边界。

这就是 contain 值的意义所在。 它使文本选择的行为像在输入框中一样

.select-text-like-you-would-within-a-textarea {
  /* Not supported anywhere yet */
  user-select: contain;
}

唉，还没有支持。 不过 IE/Edge 支持一个专有版本

.ie-version-of-contain {
  -ms-user-select: element;
}

所以现在我们有了 none、all 和 contain。 还有 text，它使文本像“普通”文本一样可选。

如果您需要重置值，您应该使用 auto，因为它是将元素恢复到其正常状态的值（例如，<p> 将恢复到文本，<textarea> 将恢复到 contain）。

样式化选定文本

由于我们在这里讨论的是选择文本，请记住您可以设置选定文本的样式

::-moz-selection { background: yellow; }
::selection { background: yellow; }

尽管……我可能建议不要将它们配对，因为自动选择文本行为已经很奇怪了，因此再加上完全不同的选择样式可能会让用户搞不清发生了什么。

或者至少，将 ::selection 设置为全局范围，而不是针对孤立区域。

经典的 JavaScript 方法

Edge 的不支持可能是您的一大障碍。 如果自动选择文本至关重要，您可能想坚持使用输入和 JavaScript。

超基本的示例

查看 Pen 最简单的选择 by Chris Coyier (@chriscoyier) on CodePen.

我相信您可以做得更花哨，例如，避免使用内联事件处理程序，并考虑“好吧，我已经点击了您，您选择了您的文本，我知道了，现在停止这样做，这样我才能只选择您的一部分”——这当然是可以做到的。

伪元素

无论好坏，user-select: text; 可能是使伪元素（如 ::before 或 ::after）可选的一种方式，而它们目前在任何浏览器中都不可选。 您无法选择它们可能是一件好事，因为伪元素也不应该在 AT 中读取（因为它们不是“内容”）。 但在屏幕上看到无法选择的文本有点奇怪，所以我不会对浏览器在这方面做出任何决定感到惊讶。

移动设备

对于 iOS，您可能还想使用另一种方法

.prevent-touch-callout {
  -webkit-touch-callout: none;
}

它不是专门针对选择，但如果您阻止选择文本，您可能也会阻止一般的交互。 MDN

当在 iPhone OS 上触摸并按住目标时，Safari 会显示有关链接的调用信息。 该属性允许禁用该行为。

强制复制？

既然我们讨论的是强制选择文本，我们也可以强制复制到剪贴板吗？ 事实上，您可以做到。 以前有一种基于 Flash 的方法可以做到这一点，但正如我们都知道的那样，Flash 已经寿终正寝了。 Chrome 刚刚宣布了 另一项致命打击。 IE 10 支持这个 execCommand 东西，而且碰巧的是，这似乎是浏览器要使用的东西。 我从 Matt Gaunt 撰写的 Google 文章中抢到了这个演示

查看 Pen 使用按钮复制文本 (Google 示例) by Chris Coyier (@chriscoyier) on CodePen.

看起来在 Blink 世界、Firefox 和 Edge 中都能正常工作，所以……太棒了。

更多信息

• MDN 上的 user-select——更多关于前缀和专有值的详细信息。
• Can I Use 对支持情况的调查——特别是对 none 值的支持情况
• 规范的当前版本——据我所知，这是最好的版本
• Google 的文档，其中包含一些关于支持情况和指向相关错误的链接的有趣细节。

Whew

说这么多话只是为了一个简单的道理。团队很棒。