HTML5 Clipboard API需用户手势触发，通过navigator.permissions查询权限；2. 使用writeText()和readText()实现复制粘贴；3. 必须在HTTPS环境下运行，注意错误处理与兼容性。
HTML5中的Clipboard API允许网页读写系统剪贴板，实现复制、粘贴等操作。现代浏览器通过异步API提供安全访问，需用户手势（如点击）触发，不能在页面加载时自动执行。
1. 请求剪贴板权限
部分操作需要明确权限，可通过navigator.permissions查询或请求：
if (navigator.permissions) {
navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
if (result.state === 'granted' || result.state === 'prompt') {
// 可以写入剪贴板
}
});
}
2. 写入剪贴板（复制）
使用navigator.clipboard.writeText()将文本写入剪贴板：
function copyText() {
const text = "要复制的内容";
navigator.clipboard.writeText(text).then(
() => {
console.log('复制成功');
},
() => {
console.error('复制失败');
}
);
}
// 绑定到按钮点击
document.getElementById('copyBtn').addEventListener('click', copyText);
3. 读取剪贴板内容（粘贴）
使用navigator.clipboard.readText()从剪贴板读取文本：
立即学习“前端免费学习笔记（深入）”；
function pasteText() {
navigator.clipboard.readText().then(
text => {
document.getElementById('input').value = text;
},
() => {
console.error('读取失败，可能未授权');
}
);
}
document.getElementById('pasteBtn').addEventListener('click', pasteText);
4. 安全与兼容性注意事项
Clipboard API受同源策略和安全限制，必须在HTTPS环境下运行（本地开发可例外）。建议始终添加错误处理：
async function safeCopy(text) {
try {
await navigator.clipboard.writeText(text);
alert('已复制到剪贴板');
} catch (err) {
console.error('无法访问剪贴板:', err);
alert('复制失败，请检查权限');
}
}
基本上就这些。只要在用户交互中调用，配合HTTPS和现代浏览器，就能顺利使用Clipboard API。不复杂但容易忽略权限和异常处理。
