选中说明文字时高亮清晰、文字仍深色可读，字符数长在文字上；「复制选区」成功后按钮自身变「已复制 ✓」； 剪贴板被拒时焦点落到替代文本框并说明 Ctrl/Cmd+C。选中范围、复制结果、失败回退都看得见。
产品与设计 · 交互状态与指针
文本选区Selection
让用户看得见选了哪些文字、看得见复制是否成功，并在权限失败时提供可手动复制的替代入口。
先用实验台选中并复制一段文字
一段说明文本：拖选或按「选择全部」，选中字符数长在文字上；按「复制选区」看结果落在按钮上；切到「剪贴板：拒绝」演练失败回退。
文本选区与复制实验台
一段说明文本：拖选或按「选择全部」，选中字符数长在文字上；按「复制选区」，结果落在按钮自身； 切到「剪贴板：拒绝」再复制，焦点落到替代文本框并提示 Ctrl/Cmd+C。
剪贴板权限
CodeNow 用清晰的步骤把想法变成可交付产品。
拖选上方文字或按「选择全部」；字符数长在文字上。下一步按「复制选区」，结果会落在按钮自身。
从刚才的操作里提炼
你在实验台上看到的就是文本选区要同时承担的事。
- 选中范围要看得见：选中字符数徽章长在文字物件上，文档边框也提示「有选区」，不只是底部 status 换一句。
- ::selection 只改颜色不改行为：原生拖选、键盘 Shift+方向键、「选择全部」仍走浏览器原生选择；CSS 伪元素不替代选择机制。
- 对比度是硬门：高亮底与文字要成对可读；浅字压浅底会让选中范围反而看不清，违反选区初衷。
- 复制结果落在按钮上：成功变「已复制 ✓」（绿），失败变「复制被拒 · 用 Ctrl+C」（红）——结果不止靠 status 文案，也不只靠颜色。
- 失败不静默：剪贴板权限可能被拒，必须把焦点送到可手动选择的替代文本框，并说明 Ctrl/Cmd+C，再补 aria-live 说明。
- 清除不删原文：清除选区只重置选中状态，原文和替代文本框仍在，可重新选择，不会惩罚用户。
什么时候关注选区与复制
从用户信号判断，也要知道它单独不够。
- 关注：说明文、错误信息、代码片段、分享链接——用户预期可以选中并复制的地方。
- 关注：自定义控件或富文本组件是否吞掉了原生选择和键盘选择（onselectstart、user-select:none 滥用）。
- 不替代：焦点环——选区高亮服务文本选择，控件本身的键盘焦点仍要 :focus-visible。
- 不替代：组件选中语义——aria-selected 表达列表/选项的选中态，和文本选区是两件事。
怎么用：从选择到复制结果的最短路径
让用户看得见范围、看得见结果、失败还能完成。
- 用
::selection改高亮颜色，从品牌色板取浅底深字组合，先核对对比度再上线。 - 保留原生选择：正文
user-select: text、加tabIndex让键盘可选，不要用 onselectstart 吞掉选择。 - 提供「复制选区」按钮，调用
navigator.clipboard.writeText；成功后把按钮自身变成「已复制 ✓」。 - catch 失败或 API 不存在时，把焦点
focus()到只读替代文本框，提示 Ctrl/Cmd+C，并用 aria-live 说明，绝不静默。
正反例：同一段说明文本，只改一处实现
围绕同一段文字，只改变选区颜色和失败处理，看用户结果如何不同。
高亮对比度不够，选中范围反而看不清；复制失败时没有任何反馈和出口，用户以为复制成功却粘贴不上。 只改 ::selection 颜色，吞掉了「看得见结果」和「失败可恢复」。
快速自测
「复制选区」时浏览器拒绝了剪贴板写入，下面哪种是合格的回退？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。