js实现点击复制

实现点击复制的几种方法

方法一：使用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);
}

方法二：使用Clipboard API 现代浏览器推荐使用navigator.clipboard.writeText()方法。

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

方法三：结合两种方法 为兼容旧浏览器，可先尝试Clipboard API，失败后回退到execCommand。

async function copyToClipboard(text) {
  if (navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      return;
    } catch (err) {}
  }
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

注意事项

• 某些浏览器可能要求复制操作必须在用户交互事件中触发
• HTTPS环境下Clipboard API更可靠
• 移动设备上可能需要特殊处理
• 可添加成功/失败提示提升用户体验

完整示例

<button onclick="copyText('要复制的文本')">点击复制</button>

<script>
async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    alert('复制成功');
  } catch {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    alert('复制成功');
  }
}
</script>