当前位置：首页 > JavaScript

js实现复制功能实现

2026-04-03 22:56:21JavaScript

使用 document.execCommand 方法

该方法已逐渐被弃用，但在某些旧浏览器中仍可使用。创建一个临时 textarea 元素，设置其值为要复制的文本，选中内容并执行复制命令。

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 的 writeText 方法，它返回一个 Promise，可以处理成功或失败的情况。

function copyToClipboard(text) {
  navigator.clipboard.writeText(text)
    .then(() => {
      console.log('复制成功');
    })
    .catch(err => {
      console.error('复制失败:', err);
    });
}

兼容性处理

结合两种方法，先尝试使用 Clipboard API，失败时回退到 execCommand 方法。

function copyToClipboard(text) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text).catch(() => {
      fallbackCopy(text);
    });
  } else {
    fallbackCopy(text);
  }
}

function fallbackCopy(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  document.body.appendChild(textarea);
  textarea.select();
  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('复制失败:', err);
  }
  document.body.removeChild(textarea);
}

添加用户反馈

复制操作通常需要给用户视觉反馈，例如显示提示信息。

function copyToClipboard(text, feedbackElement) {
  navigator.clipboard.writeText(text)
    .then(() => {
      if (feedbackElement) {
        feedbackElement.textContent = '已复制';
        setTimeout(() => {
          feedbackElement.textContent = '';
        }, 2000);
      }
    })
    .catch(() => {
      fallbackCopy(text);
    });
}

处理权限问题

某些情况下可能需要请求剪贴板写入权限，特别是在安全上下文中。

js实现复制功能实现

async function requestClipboardPermission() {
  try {
    const { state } = await navigator.permissions.query({
      name: 'clipboard-write'
    });
    return state === 'granted';
  } catch (error) {
    return false;
  }
}