现代浏览器原生支持复制，需用 navigator.clipboard.writeText() 并确保用户手势触发、HTTPS/localhost 安全上下文；禁用已废弃的 document.execCommand('copy')；复制 pre/code 内容用 textContent.trim()；iOS Safari 首次调用前需用户点击激活。
点击按钮直接复制 <textarea> 里的文本
不需要额外库，现代浏览器原生支持，关键在 navigator.clipboard.writeText()。但直接调用会失败——它只接受用户手势触发（比如 click），且必须是安全上下文（https 或 localhost）。否则抛出 DOMException: Permission denied。
实操建议：
- 绑定
click事件，别用input或blur触发复制 - 确保页面在 HTTPS 或
localhost下运行，HTTP 站点会静默拒绝 - 加
try/catch捕获拒绝或读写失败，比如用户手动禁用了剪贴板权限 - 复制后可临时改变按钮文字（如 “已复制”），但别用
setTimeout改回——要等用户下次点击再恢复，避免干扰操作节奏
<textarea id="code-input">console.log('hello');
<button onclick="copyToClipboard()">复制</button>
<script>
function copyToClipboard() {
const textarea = document.getElementById('code-input');
const text = textarea.value;
navigator.clipboard.writeText(text)
.then(() => {
// 成功反馈（可选）
const btn = event.target;
const original = btn.textContent;
btn.textContent = '已复制';
setTimeout(() => { btn.textContent = original; }, 2000);
})
.catch(err => console.error('复制失败:', err));
}
</script>
document.execCommand('copy') 已废弃，别用
老方案靠 document.execCommand('copy')，需先 select() 文本框、聚焦、再执行命令。它在 Chrome 91+、Firefox 87+ 已被标记为废弃，Safari 早已不支持。继续用会收到警告，且在新版本中可能彻底失效。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 控制台出现
Deprecated: document.execCommand('copy') is deprecated. - 在 Safari 或新版 Edge 中点击无反应，也不报错
-
textarea没有focus()就调用select()，导致选择失败，复制空字符串
如果你维护旧项目，必须迁移。替换逻辑很简单：删掉 select()、focus() 和 execCommand，换成 navigator.clipboard.writeText() 即可。
复制非 <textarea> 内容（比如预格式化代码块）
很多场景要复制 <pre><code> 里的内容，它们不可编辑，不能用 .value。得用 .textContent 提取纯文本，注意过滤换行符和首尾空白——有些代码块渲染后带缩进或空行，直接复制会影响粘贴体验。
实操建议：
- 用
element.textContent.trim()去掉首尾空白 - 如果需要保留缩进但去掉多余空行，可用
.replace(/\n\s*\n/g, '\n\n')简单清理 - 对含 HTML 实体的代码块（如
），要先用 <code>DOMParser解析还原，否则复制出来是转义后的字符 - 按钮放在
<pre>外部更稳妥，避免点击时意外触发代码块的默认行为（比如 Safari 中双击选中整块）
<pre><code class="js">function foo() {<br> return true;<br>}</code></pre>
<button onclick="copyCodeBlock(this)">复制代码</button>
<script>
function copyCodeBlock(btn) {
const pre = btn.closest('pre');
const code = pre.querySelector('code');
const text = code.textContent.trim();
navigator.clipboard.writeText(text).catch(console.error);
}
</script>
移动端 Safari 的兼容性坑
iOS 13.4+ 支持 navigator.clipboard，但有个隐藏限制：如果页面没显式获得焦点（比如从后台切回来），首次调用 writeText() 可能静默失败，不抛异常也不复制。用户必须先手动点击页面任意位置（哪怕空白处），再点复制按钮才生效。
绕过方式有限，最可靠的是加一层轻量提示：
- 检测
navigator.userAgent是否含iOS或Mac OS X且内核为WebKit - 首次点击复制按钮时，若检测到 iOS，先弹出
alert('请轻触屏幕任意位置激活剪贴板')（虽然打扰，但有效） - 或者改用
document.execCommand降级——仅限 iOS，其他平台一律走新 API - 注意：iOS 上
textarea的readonly属性会导致select()失效，若用降级方案，得临时移除readonly再恢复
真正麻烦的不是代码写法，而是用户不知道要先点一下屏幕——这个交互盲区，文档里几乎不提，只能靠实测发现。
