应使用 navigator.clipboard.writeText() 实现复制功能，需确保安全上下文、用户手势触发，并为 Safari 等旧环境提供临时 textarea 回退方案，同时添加视觉反馈与兼容性判断。
点击按钮触发复制功能要用 navigator.clipboard.writeText()
现代浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+）都支持 navigator.clipboard.writeText()，这是目前最可靠的方式。它直接写入系统剪贴板，无需创建临时 或 元素，也避免了旧式 document.execCommand('copy') 的权限和兼容性问题。
注意：该 API 只能在安全上下文（https:// 或 localhost）中调用，HTTP 站点会静默失败；且必须由用户手势（如 click）触发，不能在异步回调或定时器里直接调用。
实操建议：
- 确保按钮绑定的是原生
click事件（不要用setTimeout延迟调用） - 商品编号应从 DOM 属性（如
data-sku）或 JS 变量中读取，避免硬编码字符串 - 调用前加
if (navigator.clipboard)判断兼容性，降级提示用户手动复制
按钮 HTML 结构要带明确的 data-sku 属性
商品编号通常在服务端渲染进页面，推荐用自定义属性挂载，语义清晰、易维护。例如：
<button class="copy-btn" data-sku="SPU2024-7890">复制商品编号</button>
这样 JS 就能统一提取：btn.dataset.sku，不用依赖特定 class 名、文本内容或父容器结构。
常见错误现象：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 把编号写在按钮文字里（如
），一旦文案变化就失效 - 用
innerHTML或textContent反向解析编号，容易被空格、换行或前后缀干扰 - 多个商品共用同一按钮，但没做事件委托或动态绑定，导致只复制第一个
复制成功后要有即时视觉反馈
用户点击后无法感知是否成功，是这类功能体验差的主因。不要只靠 alert() 或控制台日志。
实操建议：
- 按钮文字临时切换为「已复制」，2 秒后自动恢复原文字（用
setTimeout配合保存原始textContent） - 添加一次简短的 CSS 动画（如背景色淡入淡出），比纯文字更直观
- 失败时显示轻量提示（如
title属性或 tooltip），不中断操作流 - 避免使用
prompt()或模态框——它们打断用户浏览商品详情的动线
移动端 Safari 需额外处理 focus 和 selection
Safari 在 iOS 16.4 之前对 navigator.clipboard.writeText() 的支持不稳定，尤其在无焦点输入场景下可能拒绝执行。虽然现在多数已修复，但仍有小概率静默失败。
稳妥做法是加一层兜底逻辑：当 writeText() 抛错（如 "NotAllowedError" 或 "TypeError"），退回到创建临时 并调用 select() + document.execCommand('copy') 的老方案。
关键细节：
- 临时
必须position: fixed; left: -9999px;，不能用display: none或visibility: hidden（Safari 不允许复制不可见元素） - 必须在
focus()后立即select()，否则 iOS Safari 可能不选中内容 - 复制完记得
remove()临时元素，防止内存泄漏
实际使用中，最容易被忽略的是安全上下文校验和移动端 Safari 的 fallback 路径。哪怕只面向国内微信内置浏览器，也要考虑其内核版本碎片化——有些低端安卓机上的 X5 内核仍会拦截 clipboard API。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
