优先使用Clipboard API并降级兼容旧浏览器实现文本复制。1. 现代浏览器调用navigator.clipboard.writeText()异步复制，需HTTPS和用户交互；2. 旧浏览器通过创建隐藏textarea调用document.execCommand('copy')模拟复制；3. 封装函数自动检测环境选择方法，确保兼容性与安全性。
在JavaScript中实现将文本复制到剪贴板，有多种方式。现代浏览器推荐使用异步的 Clipboard API，兼容性好且更安全；对于老版本浏览器，可降级使用 document.execCommand('copy') 方法。
使用 Clipboard API（推荐）
现代浏览器支持 navigator.clipboard.writeText() 方法，它返回一个 Promise，适合在用户触发的操作中使用（如点击按钮）。示例代码：
async function copyText(text) {
try {
await navigator.clipboard.writeText(text);
console.log('文本已复制：', text);
} catch (err) {
console.error('复制失败:', err);
}
}
// 调用示例
copyText('Hello, clipboard!');
注意：该方法需要在安全上下文（HTTPS）中运行，且通常需用户交互（如点击事件）触发。
使用 document.execCommand('copy')（兼容旧浏览器）
在不支持 Clipboard API 的环境中，可通过创建临时 textarea 元素并执行 execCommand 来实现复制。示例代码：
function copyTextLegacy(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed'; // 避免滚动干扰
textarea.style.top = '0';
textarea.style.left = '0';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
console.log('复制成功：', text);
} catch (err) {
console.error('复制失败：', err);
}
document.body.removeChild(textarea);
}
结合两者实现兼容方案
为了兼顾现代浏览器和旧环境，可以封装一个通用函数自动选择最佳方法。完整封装示例：
立即学习“Java免费学习笔记（深入）”；
async function copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
// 使用 Clipboard API
try {
await navigator.clipboard.writeText(text);
return true;
} catch (err) {
console.error('Clipboard API 失败:', err);
return false;
}
} else {
// 降级使用 execCommand
return new Promise(resolve => {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.cssText = 'position:fixed;top:0;left:0;opacity:0;';
document.body.appendChild(textarea);
textarea.select();
let success = false;
try {
success = document.execCommand('copy');
} catch (err) {
console.error('execCommand 失败:', err);
}
document.body.removeChild(textarea);
resolve(success);
});
}
}
// 使用方式
copyToClipboard('这是一段测试文本').then(success => {
if (success) {
alert('复制成功！');
} else {
alert('复制失败，请检查浏览器设置');
}
});
基本上就这些。优先用 Clipboard API，配合降级策略，确保大多数场景下都能正常复制文本。注意权限和用户行为触发限制，避免静默复制带来的安全问题。
