优先使用现代Clipboard API并降级至document.execCommand以实现跨浏览器兼容；需在安全上下文中由用户触发操作，避免自动复制，注意iOS Safari的限制及旧版浏览器支持问题。
在HTML5中实现复制粘贴功能，通常需要借助浏览器的剪贴板API。为了保证在不同浏览器中的兼容性，需结合document.execCommand（已废弃但广泛支持）和现代的异步Clipboard API进行降级处理。
使用现代 Clipboard API（推荐）
注意：现代浏览器推荐使用异步 Clipboard API，但需要 HTTPS 环境或本地开发环境（localhost）支持。以下代码将文本写入剪贴板：
async function copyText(text) {
try {
await navigator.clipboard.writeText(text);
console.log('复制成功');
} catch (err) {
console.error('复制失败:', err);
}
}
读取剪贴板内容：
async function pasteText() {
try {
const text = await navigator.clipboard.readText();
console.log('粘贴内容:', text);
return text;
} catch (err) {
console.error('读取失败:', err);
}
}
兼容旧浏览器：使用 document.execCommand
对于不支持 Clipboard API 的浏览器（如 IE 或旧版 Chrome/Firefox），可使用document.execCommand('copy')实现兼容。
立即学习“前端免费学习笔记（深入）”；
实现步骤：
- 创建一个临时的 元素并填入要复制的文本
- 将其添加到 DOM 并选中内容
- 调用 document.execCommand('copy')
- 移除临时元素
function copyTextFallback(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed'; // 避免滚动
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.select();
try {
const successful = document.execCommand('copy');
if (successful) {
console.log('复制成功');
} else {
console.warn('复制失败');
}
} catch (err) {
console.error('执行命令异常:', err);
}
document.body.removeChild(textarea);
}
综合兼容写法
结合两种方式，优先使用 Clipboard API，失败时降级到execCommand：
async function copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
// 使用现代 API
try {
await navigator.clipboard.writeText(text);
console.log('已复制到剪贴板');
} catch (err) {
console.warn('Clipboard API 失败，尝试降级方案');
copyTextFallback(text);
}
} else {
// 降级方案
copyTextFallback(text);
}
}
调用示例：
// 绑定按钮点击
document.getElementById('copyBtn').addEventListener('click', () => {
copyToClipboard('这是要复制的内容');
});
注意事项
- Clipboard API 需要在安全上下文中运行（HTTPS 或 localhost）
- 用户操作触发（如点击事件）才能访问剪贴板，避免自动复制
-
document.execCommand已被废弃，仅用于兼容老浏览器 - iOS Safari 对 Clipboard API 支持有限，部分版本仍需使用输入框选中方案
基本上就这些，根据目标用户浏览器范围选择合适方案。优先使用现代 API，保留降级路径确保兼容性。不复杂但容易忽略安全与触发条件。
