当前位置：首页 > JavaScript

js实现复制粘贴

2026-01-30 08:53:04JavaScript

使用 Clipboard API 实现复制粘贴

现代浏览器提供了 Clipboard API，允许开发者以安全的方式访问系统剪贴板。以下是具体实现方法：

复制文本到剪贴板

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Text copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

从剪贴板读取文本

async function pasteFromClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Pasted content: ', text);
    return text;
  } catch (err) {
    console.error('Failed to read: ', err);
  }
}

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

虽然 Clipboard API 是推荐方式，但旧版浏览器可能需要 fallback 方案：

js实现复制粘贴

复制文本

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

  try {
    const successful = document.execCommand('copy');
    if (!successful) throw new Error('Copy failed');
  } catch (err) {
    console.error('Fallback copy failed: ', err);
  }

  document.body.removeChild(textarea);
}

处理粘贴事件

监听粘贴事件并获取内容：

js实现复制粘贴

document.addEventListener('paste', (event) => {
  const clipboardData = event.clipboardData || window.clipboardData;
  const pastedText = clipboardData.getData('text');
  console.log('Pasted text:', pastedText);
});

安全注意事项

Clipboard API 需要用户授权：

页面必须通过 HTTPS 提供服务（localhost 除外）
某些浏览器可能要求这些操作必须由用户手势（如点击）触发
读取剪贴板内容需要用户明确许可

兼容性处理建议

实现完整的复制粘贴功能应包含兼容性检查：

function copyText(text) {
  if (navigator.clipboard) {
    return navigator.clipboard.writeText(text);
  } else {
    return new Promise((resolve, reject) => {
      try {
        fallbackCopyText(text);
        resolve();
      } catch (e) {
        reject(e);
      }
    });
  }
}

扩展功能：复制富文本

Clipboard API 还支持复制 HTML 等富文本内容：

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

标签: js