说实话，复制文本到剪贴板这个功Neng在 Web 开发中太常见了比如你想让用户一键复制某个链接或者一段代码啥的，哈哈，这时候就得用到剪贴板 API 了。

咱就是说现代浏览器提供了 navigator.clipboard 这个 API，kan起来hen美好，但实际上它有一些限制，你懂的。

navigator.clipboard 要求页面必须处于安全上下文，简单来说就是要 HTTPS，不对不对，应该是说需要 HTTPS 环境下才Neng用。

害，那些还在用 HTTP 的老项目怎么办？咱得想办法兼容啊。

传统的 document.execCommand 方法虽然兼容性geng好，但使用起来有点麻烦，你得创建一个临时的 textarea 元素，然后选中文本，再执行复制命令，Zui后还得把这个 textarea 移除，啰嗦吧。

const textarea = document.createElementtextarea.style.cssText = 'position:fixed; opacity:; z-index:-; left:-9999px; top:-9999px;'textarea.value = contentdocument.body.appendChildtextarea.selecttextarea.setSelectionRange?. // 兼容 iOS Safariconst copied = document.execCommanddocument.body.removeChild

iOS Safari 有个小坑，需要显式调用 setSelectionRange 才Neng正确选中文本，你说气不气？

await navigator.clipboard.writeText

优点是简洁直观，直接操作剪贴板；缺点是需要安全上下文，部分浏览器支持受限。

本质上，我们需要一个统一的工具函数来屏蔽这些差异，这个函数得Neng处理各种情况，比如空内容复制、旧版浏览器兼容啥的。

export interface CopyTextOptions { allowWhitespace?: boolean legacy?: boolean}export async function copyText: Promise<CopyTextReturn> { // 实现细节} 关键逻辑说明

参数一：allowWhitespace

控制是否允许复制空白内容，默认 false 会过滤空字符串和纯空格内容，避免用户误操作。

参数二：legacy

是否强制使用传统方案，有些场景下可Neng需要降级处理，比如在 iframe 内。

const result = await copyText 集成提示组件

你Ke以根据项目实际使用的 UI 库进行适配，比如 Element Plus 的 ElMessage 组件。

import { ElMessage } from 'element-plus'if === '')) { ElMessage.error} else { // 复制成功后 ElMessage.success} . 核心

copyText 函数的核心设计要点：优先使用现代 API，同时兼容传统方案；处理空白内容的复制；提供灵活的参数配置。

这个工具函数覆盖了浏览器复制场景的绝大多数需求，可直接集成到项目中，省时省力。