当前位置：首页 > JavaScript

js实现复制功能

2026-04-03 18:23:33JavaScript

使用 document.execCommand 方法（已废弃但仍可用）

该方法在大多数现代浏览器中仍有效，但已被标记为废弃，建议使用新的 Clipboard API。

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

这是推荐的现代方法，需要 HTTPS 环境或本地开发环境。

js实现复制功能

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('文本已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
  }
}

处理权限问题

Clipboard API 可能需要用户授权，可以这样检查权限状态：

js实现复制功能

async function checkClipboardPermission() {
  const result = await navigator.permissions.query({
    name: 'clipboard-write'
  });
  return result.state;
}

兼容性处理方案

结合两种方法实现最佳兼容性：

async function copyText(text) {
  try {
    if (navigator.clipboard) {
      await navigator.clipboard.writeText(text);
    } else {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    }
    return true;
  } catch (err) {
    console.error('复制失败:', err);
    return false;
  }
}

复制特定元素内容

复制页面中某个元素的文本内容：

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