优先使用现代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')实现兼容。
立即学习“前端免费学习笔记（深入）”；
实现步骤：
- 创建一个临时的 <textarea> 元素并填入要复制的文本
- 将其添加到 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，保留降级路径确保兼容性。不复杂但容易忽略安全与触发条件。