当前位置：首页 > JavaScript

js实现复制的功能实现

2026-02-02 12:42:30JavaScript

使用 document.execCommand 方法

在较旧的浏览器中，可以使用 document.execCommand('copy') 方法实现复制功能。创建一个临时的 textarea 或 input 元素，将需要复制的文本赋值给该元素，选中文本后执行复制命令。

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

现代浏览器推荐使用 Clipboard API 的 navigator.clipboard.writeText() 方法。该方法返回一个 Promise，可以更安全地处理复制操作。

js实现复制的功能实现

function copyText(text) {
  navigator.clipboard.writeText(text)
    .then(() => {
      console.log('Text copied to clipboard');
    })
    .catch(err => {
      console.error('Failed to copy text: ', err);
    });
}

兼容性处理

为了兼容不支持 Clipboard API 的旧浏览器，可以结合两种方法。先尝试使用 Clipboard API，失败后回退到 document.execCommand。

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

function fallbackCopyText(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('Failed to copy text: ', err);
  }
  document.body.removeChild(textarea);
}

复制特定元素的内容

如果需要复制某个 DOM 元素（如 div 或 pre）中的文本，可以先获取其内容再调用复制方法。

js实现复制的功能实现

function copyElementText(elementId) {
  const element = document.getElementById(elementId);
  const text = element.innerText || element.textContent;
  copyText(text);
}

用户交互限制

浏览器的安全策略通常要求复制操作必须由用户触发（如点击事件）。直接在脚本中调用复制方法可能会被阻止，因此建议将复制逻辑绑定到按钮点击事件上。

document.getElementById('copyButton').addEventListener('click', () => {
  copyText('Text to be copied');
});

样式和反馈

为了提高用户体验，可以在复制成功后提供视觉反馈，例如显示一个提示消息或短暂改变按钮样式。

function copyTextWithFeedback(text, button) {
  copyText(text);
  button.innerText = 'Copied!';
  setTimeout(() => {
    button.innerText = 'Copy';
  }, 2000);
}