当前位置：首页 > JavaScript

js 实现copy

2026-04-04 12:55:46JavaScript

实现复制功能的几种方法

使用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);
  }
}

兼容性处理方案

js 实现copy

function copyText(text) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text).then(() => {
      console.log('复制成功');
    }).catch(err => {
      console.error('复制失败:', err);
      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');
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }

  document.body.removeChild(textarea);
}

实际应用示例

为按钮添加复制功能

document.getElementById('copyBtn').addEventListener('click', () => {
  const textToCopy = document.getElementById('textToCopy').value;
  copyText(textToCopy);
});

复制当前页面URL

js 实现copy

function copyCurrentURL() {
  copyText(window.location.href);
}

注意事项

Clipboard API需要安全上下文（HTTPS或localhost）某些浏览器可能要求用户首次交互后才允许访问剪贴板移动端浏览器可能有不同的实现方式 Safari浏览器对Clipboard API的支持较晚

高级用法

复制HTML内容

async function copyHTML(html) {
  const blob = new Blob([html], {type: 'text/html'});
  const clipboardItem = new ClipboardItem({'text/html': blob});
  await navigator.clipboard.write([clipboardItem]);
}

读取剪贴板内容

async function pasteText() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('粘贴内容:', text);
    return text;
  } catch (err) {
    console.error('读取剪贴板失败:', err);
  }
}