JavaScript如何实现剪切板操作_JavaScript如何复制文本到剪切板
navigator.clipboard.writeText() 是现代浏览器推荐的剪切板复制方法，需 HTTPS/localhost 安全上下文及用户手势触发，返回 Promise，成功无返回值，失败抛错。
JavaScript 可以通过 navigator.clipboard API 实现剪切板的复制操作，这是现代浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+）原生支持的标准方式，安全、简洁、无需依赖 Flash 或 document.execCommand。
使用 navigator.clipboard.writeText() 复制文本
这是最常用、推荐的方式。它返回一个 Promise，成功时无返回值，失败时抛出错误。
- 确保页面是安全上下文（即通过 https:// 或 localhost 访问），否则 API 不可用
- 必须由用户手势（如点击、键盘事件）触发，不能在页面加载或定时器中直接调用，否则会被浏览器拒绝
- 示例代码：
document.getElementById('copyBtn').addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('Hello, world!');
console.log('文本已复制到剪切板');
} catch (err) {
console.error('复制失败:', err);
}
});
兼容旧版浏览器（可选降级方案）
若需支持较老版本 Chrome/Firefox（document.execCommand('copy')，但该方法已废弃，且限制更多：
- 需将文本放入
或元素并选中其内容 - 元素必须在 DOM 中且可见（不可 display:none 或 visibility:hidden）
- 同样要求用户手势触发
function fallbackCopy(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
console.log('已使用 execCommand 复制');
} catch (err) {
console.error('execCommand 复制失败', err);
} finally {
document.body.removeChild(textarea);
}
}
}检查剪切板权限与状态
可通过 navigator.permissions.query() 主动检查是否拥有写入权限（尤其在 Safari 等严格策略浏览器中）：
- 权限状态可能为 'granted'、'denied' 或 'prompt'
- 首次调用 writeText 时浏览器通常会自动请求权限，无需提前申请
- 如需提前判断，可这样检查：
async function checkClipboardPermission() {
if ('permissions' in navigator) {
const result = await navigator.permissions.query({ name: 'clipboard-write' });
console.log('剪切板写入权限:', result.state); // 'granted', 'prompt', 'denied'
}
}
复制富文本或 HTML（进阶用法）
writeText 仅支持纯文本。如需复制带格式的 HTML 内容（如从编辑器复制带样式的段落），需使用 clipboard.write() 配合 ClipboardItem：
- 目前兼容性有限（Chrome 84+ 支持较好，Firefox/Safari 支持不完整）
- 需构造 Blob 并指定类型为 'text/html'
- 简单示例：
async function copyHtml(htmlString) {
try {
const htmlBlob = new Blob([htmlString], { type: 'text/html' });
const item = new ClipboardItem({ 'text/html': htmlBlob });
await navigator.clipboard.write([item]);
} catch (err) {
console.error('HTML 复制失败:', err);
}
}
