js实现拷贝
实现文本拷贝
使用 document.execCommand 方法可以实现文本拷贝，但此方法已逐渐被废弃，仅在部分旧浏览器中支持。示例代码如下：
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
现代浏览器推荐使用 Clipboard API 实现拷贝功能，兼容性更好且更安全。示例代码如下：
async function copyText(text) {
try {
await navigator.clipboard.writeText(text);
console.log('文本已成功拷贝');
} catch (err) {
console.error('拷贝失败:', err);
}
}拷贝富文本内容
如需拷贝带格式的 HTML 内容，可以使用 Clipboard API 的 write 方法：
async function copyHtml(html) {
const blob = new Blob([html], { type: 'text/html' });
const clipboardItem = new ClipboardItem({ 'text/html': blob });
await navigator.clipboard.write([clipboardItem]);
}处理无 Clipboard API 的情况
在不支持 Clipboard API 的浏览器中，可以回退到 execCommand 方法：
async function copyTextFallback(text) {
if (!navigator.clipboard) {
copyText(text);
return;
}
try {
await navigator.clipboard.writeText(text);
} catch (err) {
console.error('拷贝失败:', err);
}
}监听拷贝事件
可以通过监听 copy 事件来自定义拷贝行为：
document.addEventListener('copy', (e) => {
e.clipboardData.setData('text/plain', '自定义拷贝内容');
e.preventDefault();
});注意事项
- 使用 Clipboard API 需要在安全上下文中（HTTPS 或 localhost）
- 某些浏览器可能需要用户手势触发拷贝操作
- 移动端浏览器对 Clipboard API 的支持可能有限
