js实现复制功能
使用 document.execCommand 方法（已废弃但仍可用）
该方法在大多数现代浏览器中仍有效，但已被标记为废弃，建议使用新的 Clipboard API。
function copyText(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}使用现代 Clipboard API
这是推荐的现代方法，需要 HTTPS 环境或本地开发环境。
async function copyText(text) {
try {
await navigator.clipboard.writeText(text);
console.log('文本已复制到剪贴板');
} catch (err) {
console.error('复制失败:', err);
}
}处理权限问题
Clipboard API 可能需要用户授权，可以这样检查权限状态：
async function checkClipboardPermission() {
const result = await navigator.permissions.query({
name: 'clipboard-write'
});
return result.state;
}兼容性处理方案
结合两种方法实现最佳兼容性：
async function copyText(text) {
try {
if (navigator.clipboard) {
await navigator.clipboard.writeText(text);
} else {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
return true;
} catch (err) {
console.error('复制失败:', err);
return false;
}
}复制特定元素内容
复制页面中某个元素的文本内容：
function copyElementText(elementId) {
const element = document.getElementById(elementId);
if (element) {
const text = element.innerText || element.textContent;
copyText(text);
}
}注意事项
- 现代浏览器推荐使用 Clipboard API
- 某些浏览器可能限制剪贴板访问，特别是在 iframe 中
- 用户可能需要与页面交互后才能触发复制操作
- 移动设备上的支持可能有所不同
