当前位置：首页 > JavaScript

js方法实现

2026-04-06 10:24:20JavaScript

使用 `document.execCommand` 方法

document.execCommand 是一个传统的实现复制到剪贴板的方法，适用于大多数现代浏览器。调用该方法执行 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);
}

创建一个隐藏的 textarea 元素，将目标文本赋值给它，选中文本内容后调用 document.execCommand('copy') 完成复制，最后移除临时元素。

使用 Clipboard API

现代浏览器推荐使用 Clipboard API，它提供了更强大和安全的剪贴板操作能力。通过 navigator.clipboard.writeText() 方法可以直接写入文本到剪贴板。

js方法实现

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

Clipboard API 是异步操作，需要使用 async/await 或 Promise 语法处理。此方法需要 HTTPS 环境或在本地开发时使用。

兼容性处理

为了兼容旧版浏览器，可以结合两种方法，优先使用 Clipboard API，若不支持则回退到 document.execCommand。

js方法实现

async function copyToClipboard(text) {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      return;
    } catch (err) {
      console.error('Clipboard API 复制失败，尝试 fallback');
    }
  }

  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

处理用户交互限制

浏览器安全策略要求剪贴板操作必须由用户触发（如点击事件）。直接在脚本中调用可能会被阻止，需绑定到按钮点击等用户行为。

document.getElementById('copyButton').addEventListener('click', async () => {
  await copyToClipboard('要复制的文本');
});

反馈复制状态

为了提升用户体验，可以在复制成功后提供视觉反馈，例如显示提示信息。

async function copyWithFeedback(text, buttonElement) {
  try {
    await copyToClipboard(text);
    buttonElement.textContent = '已复制!';
    setTimeout(() => {
      buttonElement.textContent = '复制';
    }, 2000);
  } catch (err) {
    buttonElement.textContent = '复制失败';
  }
}

复制成功后临时修改按钮文本，2秒后恢复原状。若失败则显示错误状态。