当前位置：首页 > JavaScript

js实现复制功能实现

2026-01-16 12:36:23JavaScript

使用document.execCommand方法（传统方式，已逐渐被弃用）

传统方式通过document.execCommand('copy')实现复制功能，需先选中文本。以下是一个完整示例：

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

// 调用示例
copyText('需要复制的文本');

注意：该方法在部分现代浏览器中可能已被禁用或存在兼容性问题。

使用Clipboard API（现代推荐方式）

现代浏览器推荐使用异步的Clipboard API，需要处理权限问题：

js实现复制功能实现

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
    // 降级处理
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  }
}

// 调用示例
copyText('需要复制的文本');

结合点击事件实现按钮复制

常见场景是点击按钮复制指定内容：

<button onclick="copyToClipboard('要复制的文本')">复制文本</button>
<div id="copyTarget">这个div的内容将被复制</div>

<script>
function copyToClipboard(text) {
  if (!navigator.clipboard) {
    // 旧版浏览器降级方案
    const range = document.createRange();
    range.selectNode(document.getElementById('copyTarget'));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
    alert('已复制');
    return;
  }

  navigator.clipboard.writeText(text).then(() => {
    alert('复制成功');
  }).catch(err => {
    alert('复制失败，请手动复制');
  });
}
</script>

复制富文本内容

如需复制带格式的内容，可以使用Clipboard API的write方法：

js实现复制功能实现

async function copyRichText() {
  const content = '<b>加粗文本</b><i>斜体文本</i>';
  const blob = new Blob([content], { type: 'text/html' });
  const clipboardItem = new ClipboardItem({ 'text/html': blob });

  try {
    await navigator.clipboard.write([clipboardItem]);
  } catch (error) {
    console.error('复制失败:', error);
  }
}

安全注意事项

使用Clipboard API时需要注意：

页面必须通过HTTPS提供服务
在iframe中使用时需要allow="clipboard-read; clipboard-write"权限
用户可能拒绝剪贴板访问权限

兼容性处理方案

完整的兼容性处理方案应包含以下逻辑：

优先尝试使用现代Clipboard API
失败后降级到execCommand方案
最终提示用户手动复制

async function copyWithFallback(text) {
  // 现代API
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch (e) {
      console.warn('Clipboard API failed', e);
    }
  }

  // 传统方式
  try {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    document.body.appendChild(textarea);
    textarea.select();

    const success = document.execCommand('copy');
    document.body.removeChild(textarea);
    return success;
  } catch (e) {
    console.warn('execCommand failed', e);
    return false;
  }
}

以上方法涵盖了从传统到现代的复制实现方案，可根据实际项目需求和浏览器兼容性要求选择适当方案。