首选navigator.clipboard API，因其异步、安全且符合现代标准；旧浏览器可回退至document.execCommand并配合临时DOM模拟操作。
JavaScript实现剪贴板操作，现在最推荐、最现代的方式是利用
navigator.clipboard
API，它提供了一套异步、基于 Promise 的方法，能安全且高效地处理文本和图片等内容。当然，考虑到兼容性，对一些老旧浏览器，我们可能还需要回溯到
document.execCommand
这样的传统手段，但那往往需要一些巧妙的DOM操作来配合。
解决方案
在我看来，如果你正在开发现代Web应用，
navigator.clipboard
API无疑是首选。它不仅异步，不会阻塞主线程，还自带了权限管理，用户体验上会更流畅、更安全。
复制文本到剪贴板：
这块其实挺直观的。核心就是
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')
document.execCommand('copy')
在现代Web开发中逐渐被淘汰？
说实话，
document.execCommand('copy')
曾经是实现剪贴板操作的唯一标准方式，但现在它确实不太受待见了。最主要的原因，我认为是它的同步特性和相对复杂的实现逻辑。
首先，它是同步的。这意味着当你在执行
execCommand('copy')
时，如果操作涉及大量数据或者浏览器需要时间处理，它可能会阻塞页面的主线程，导致UI卡顿。这在用户体验上是致命的。而
navigator.clipboard
是基于Promise的异步操作，天然地解决了这个问题。
其次，
execCommand('copy')
通常需要一个可见的、可选择的DOM元素来“模拟”用户的复制行为。你不能直接给它一个字符串让它复制。你得先创建一个临时的