javascript中可封装navigator.clipboard读写操作，需注意权限、兼容性及错误处理；写入需用户手势触发，读取需https安全上下文和授权，移动端部分webview不支持。
JavaScript 中可以使用 Promsie 封装 navigator.clipboard 的读写操作，因为原生 API 本身已返回 Promise，但需注意权限、兼容性和错误处理。直接 await 调用即可，但封装后更利于复用、统一错误提示和降级处理。
封装 clipboard.writeText（写入文本）
写入文本是最常用的操作，需确保用户手势触发（如 click），否则可能被浏览器拒绝。
封装示例：
function writeTextToClipboard(text) {
if (!navigator.clipboard) {
return Promise.reject(new Error('当前浏览器不支持 Clipboard API'));
}
return navigator.clipboard.writeText(text)
.catch(err => {
throw new Error(`写入剪贴板失败：${err.message}`);
});
}
// 使用
button.addEventListener('click', async () => {
try {
await writeTextToClipboard('Hello, world!');
console.log('已复制到剪贴板');
} catch (err) {
alert(err.message);
}
});
封装 clipboard.readText（读取文本）
读取操作需要用户主动授权（通常在首次调用时弹出权限提示），且仅在安全上下文（HTTPS 或 localhost）中可用。
封装建议加入权限检查与友好 fallback：
- 先尝试
navigator.permissions.query({ name: 'clipboard-read' })预判是否可能失败 - 捕获
"NotAllowedError"（用户拒绝或未触发手势）和"NotFoundError"（无文本内容） - 对旧版浏览器（如 Safari 13.1+ 支持有限）可考虑降级到
document.execCommand('copy')（仅限写入）
统一读写工具类（支持多种格式）
若需读写图片或 HTML，可扩展为支持 write() / read() 方法，利用 ClipboardItem 构造：
-
write()接收对象如{ 'text/plain': 'abc', 'text/html': '<b>abc</b>' } -
read()返回ClipboardItem数组，需遍历types并调用getType()获取 Blob - 注意：图片读写在 Chrome/Edge 85+ 支持较好，Firefox 和 Safari 仍有限制
注意事项与常见问题
实际使用中容易忽略的关键点：
- 必须在用户交互事件（如
click、keydown）中调用，否则抛出NotAllowedError - HTTP 环境下（非 HTTPS / localhost）多数浏览器会静默拒绝
readText - 移动端部分 WebView（如微信内置浏览器）不支持
navigator.clipboard，需检测并提示 - 不要在
setTimeout或异步回调中“延迟”调用，会丢失用户手势上下文
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
