当前位置：首页 > JavaScript

js 实现copy

2026-03-01 12:11:27JavaScript

实现复制功能的几种方法

在JavaScript中，实现复制文本到剪贴板有多种方式。以下是几种常见的方法：

使用document.execCommand方法

这种方法兼容性较好，但在现代浏览器中已逐渐被弃用。

js 实现copy

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

这是现代浏览器推荐的方式，需要用户授权。

js 实现copy

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

使用Selection API

这种方法通过创建选区来实现复制。

function copyToClipboard(text) {
  const range = document.createRange();
  const selection = window.getSelection();
  const element = document.createElement('div');
  element.textContent = text;
  document.body.appendChild(element);
  range.selectNodeContents(element);
  selection.removeAllRanges();
  selection.addRange(range);
  document.execCommand('copy');
  selection.removeAllRanges();
  document.body.removeChild(element);
}

注意事项

Clipboard API需要HTTPS环境或在localhost下工作
某些浏览器可能要求复制操作必须在用户交互事件中触发
移动设备上可能有不同的行为
始终要处理可能的错误情况

兼容性解决方案

可以结合多种方法来实现更好的兼容性：

async function copyToClipboard(text) {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch (err) {
      console.warn('Clipboard API失败:', err);
    }
  }

  // 回退方案
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  document.body.appendChild(textarea);
  textarea.select();

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

以上方法可以根据具体需求和浏览器兼容性要求选择使用。现代应用推荐优先使用Clipboard API，因为它更安全且符合未来标准。