当前位置：首页 > JavaScript

js实现copy

2026-03-15 11:01:28JavaScript

实现复制功能的几种方法

使用原生JavaScript实现复制功能可以通过以下几种方式：

js实现copy

使用document.execCommand方法（已废弃但仍有浏览器支持）

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

使用现代Clipboard API

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('内容已复制到剪贴板');
  } catch (err) {
    console.error('无法复制内容: ', err);
  }
}

兼容性更好的混合方法

function copyText(text) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text).catch(err => {
      console.error('使用Clipboard API失败，回退到execCommand');
      fallbackCopyText(text);
    });
  } else {
    fallbackCopyText(text);
  }
}

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

  try {
    const successful = document.execCommand('copy');
    if (!successful) {
      throw new Error('复制失败');
    }
  } catch (err) {
    console.error('无法复制内容: ', err);
  } finally {
    document.body.removeChild(textarea);
  }
}

复制特定元素内容

function copyElementText(elementId) {
  const element = document.getElementById(elementId);
  const range = document.createRange();
  range.selectNode(element);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);

  try {
    const successful = document.execCommand('copy');
    if (!successful) {
      throw new Error('复制失败');
    }
  } catch (err) {
    console.error('无法复制内容: ', err);
  }
  window.getSelection().removeAllRanges();
}