当前位置：首页 > JavaScript

js实现复制粘贴

2026-02-28 23:58:03JavaScript

使用 Clipboard API

现代浏览器提供了 Clipboard API，允许直接读写剪贴板内容。以下是实现复制和粘贴的代码示例：

复制文本到剪贴板

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('文本已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

从剪贴板读取文本

async function pasteFromClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('剪贴板内容:', text);
    return text;
  } catch (err) {
    console.error('读取剪贴板失败:', err);
  }
}

使用 document.execCommand（已废弃但广泛支持）

虽然已废弃，但在某些旧项目中仍可能见到这种实现方式：

复制文本

function copyTextFallback(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

处理权限问题

Clipboard API 需要用户授权，特别是在读取剪贴板内容时。确保页面通过 HTTPS 提供服务，并在敏感操作前请求权限：

navigator.permissions.query({ name: 'clipboard-read' }).then(result => {
  if (result.state === 'granted' || result.state === 'prompt') {
    // 可以安全地尝试读取剪贴板
  }
});

兼容性处理

对于不支持 Clipboard API 的浏览器，可以结合两种方法：

async function copyText(text) {
  if (navigator.clipboard) {
    return navigator.clipboard.writeText(text);
  } else {
    copyTextFallback(text);
    return Promise.resolve();
  }
}

实际应用示例

为按钮添加复制功能：

<button id="copyBtn">复制文本</button>
<script>
  document.getElementById('copyBtn').addEventListener('click', () => {
    copyToClipboard('要复制的示例文本');
  });
</script>