首选navigator.clipboard API，因其异步、安全且符合现代标准；旧浏览器可回退至document.execCommand并配合临时DOM模拟操作。
JavaScript实现剪贴板操作，现在最推荐、最现代的方式是利用
navigator.clipboardAPI，它提供了一套异步、基于 Promise 的方法，能安全且高效地处理文本和图片等内容。当然，考虑到兼容性，对一些老旧浏览器，我们可能还需要回溯到
document.execCommand这样的传统手段，但那往往需要一些巧妙的DOM操作来配合。
解决方案
在我看来，如果你正在开发现代Web应用，
navigator.clipboardAPI无疑是首选。它不仅异步，不会阻塞主线程，还自带了权限管理，用户体验上会更流畅、更安全。
复制文本到剪贴板：
这块其实挺直观的。核心就是
navigator.clipboard.writeText()方法。
立即学习“Java免费学习笔记（深入）”；
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('文本已成功复制到剪贴板！');
// 可以在这里给用户一个反馈，比如一个小的提示框
} catch (err) {
console.error('复制失败:', err);
// 用户可能拒绝了权限，或者浏览器不支持
// 考虑提供一个备用方案，比如让用户手动复制
fallbackCopyToClipboard(text); // 尝试回退方案
}
}
// 假设我们有一个按钮来触发
document.getElementById('copyButton').addEventListener('click', () => {
const contentToCopy = document.getElementById('myInput').value;
copyToClipboard(contentToCopy);
});这里我特意加了一个
try...catch，因为权限问题或用户拒绝都是可能发生的。异步操作的错误处理总是需要特别注意。
从剪贴板粘贴文本：
粘贴操作则通过
navigator.clipboard.readText()实现。
async function pasteFromClipboard() {
try {
const text = await navigator.clipboard.readText();
console.log('从剪贴板粘贴的文本:', text);
document.getElementById('pasteTarget').value = text;
} catch (err) {
console.error('粘贴失败:', err);
// 同样，用户可能拒绝了权限
// 提示用户手动粘贴
}
}
document.getElementById('pasteButton').addEventListener('click', () => {
pasteFromClipboard();
});需要注意的是，
readText()方法通常需要用户明确的交互（比如点击按钮）才能触发，否则浏览器会出于安全考虑拒绝。直接在页面加载时就尝试读取剪贴板内容，那几乎是不可能的。
为什么document.execCommand('copy')在现代Web开发中逐渐被淘汰？
说实话，
document.execCommand('copy')曾经是实现剪贴板操作的唯一标准方式，但现在它确实不太受待见了。最主要的原因，我认为是它的同步特性和相对复杂的实现逻辑。
首先，它是同步的。这意味着当你在执行
execCommand('copy')时，如果操作涉及大量数据或者浏览器需要时间处理，它可能会阻塞页面的主线程，导致UI卡顿。这在用户体验上是致命的。而navigator.clipboard是基于Promise的异步操作，天然地解决了这个问题。
其次，
execCommand('copy')通常需要一个可见的、可选择的DOM元素来“模拟”用户的复制行为。你不能直接给它一个字符串让它复制。你得先创建一个临时的