当前位置：首页 > JavaScript

js实现复制功能

2026-02-28 17:57:29JavaScript

原生JavaScript实现复制功能

使用document.execCommand方法（已废弃但仍有广泛兼容性）

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

现代Clipboard API实现

推荐使用更现代的异步Clipboard API

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

处理无权限情况

添加权限检查和降级方案

async function safeCopy(text) {
  if (!navigator.clipboard) {
    return fallbackCopy(text);
  }

  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    return fallbackCopy(text);
  }
}

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

  try {
    const successful = document.execCommand('copy');
    document.body.removeChild(textarea);
    return successful;
  } catch {
    document.body.removeChild(textarea);
    return false;
  }
}

复制特定元素内容

复制DOM元素内的文本

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

添加用户反馈

复制成功后提供视觉反馈

js实现复制功能

async function copyWithFeedback(text, feedbackElement) {
  try {
    await navigator.clipboard.writeText(text);
    if (feedbackElement) {
      feedbackElement.textContent = '已复制!';
      setTimeout(() => {
        feedbackElement.textContent = '';
      }, 2000);
    }
  } catch (err) {
    if (feedbackElement) {
      feedbackElement.textContent = '复制失败';
    }
  }
}