当前位置：首页 > JavaScript

js实现复制粘贴功能

2026-01-30 15:53:02JavaScript

使用 Clipboard API 实现复制粘贴

现代浏览器支持 Clipboard API，提供异步访问系统剪贴板的能力。以下是实现方法：

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

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

使用 document.execCommand 实现复制（兼容旧浏览器）

对于需要支持旧版浏览器的场景，可以使用已废弃但仍广泛支持的 execCommand 方法：

js实现复制粘贴功能

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

  try {
    const successful = document.execCommand('copy');
    if (successful) {
      console.log('复制成功');
    }
  } catch (err) {
    console.error('复制失败:', err);
  }

  document.body.removeChild(textarea);
}

监听粘贴事件

处理用户粘贴操作可以通过监听 paste 事件：

js实现复制粘贴功能

document.addEventListener('paste', (event) => {
  const pastedText = (event.clipboardData || window.clipboardData).getData('text');
  console.log('用户粘贴的内容:', pastedText);
  // 处理粘贴内容
});

安全注意事项

Clipboard API 受浏览器安全策略限制：

需要 HTTPS 环境或 localhost
可能要求用户先与页面交互（如点击按钮）
读取剪贴板内容需要用户明确授权

完整示例代码

<button id="copyBtn">复制文本</button>
<button id="pasteBtn">粘贴文本</button>
<div id="output"></div>

<script>
  document.getElementById('copyBtn').addEventListener('click', async () => {
    await copyText('这是要复制的示例文本');
  });

  document.getElementById('pasteBtn').addEventListener('click', async () => {
    const text = await pasteText();
    document.getElementById('output').textContent = text || '无内容';
  });

  // 使用前面定义的 copyText 和 pasteText 函数
</script>

处理富文本内容

如需复制粘贴富文本内容（如HTML），可以使用以下方法：

async function copyHtml(html) {
  const blob = new Blob([html], { type: 'text/html' });
  const item = new ClipboardItem({ 'text/html': blob });
  await navigator.clipboard.write([item]);
}