17370845950

优先使用现代Clipboard API并降级至document.execCommand以实现跨浏览器兼容；需在安全上下文中由用户触发操作，避免自动复制，注意iOS Safari的限制及旧版浏览器支持问题。

在HTML5中实现复制粘贴功能，通常需要借助浏览器的剪贴板API。为了保证在不同浏览器中的兼容性，需结合document.execCommand（已废弃但广泛支持）和现代的异步Clipboard API进行降级处理。

使用现代 Clipboard API（推荐）

以下代码将文本写入剪贴板：

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

读取剪贴板内容：

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

兼容旧浏览器：使用 document.execCommand

对于不支持 Clipboard API 的浏览器（如 IE 或旧版 Chrome/Firefox），可使用document.execCommand('copy')实现兼容。

实现步骤：

• 创建一个临时的 元素并填入要复制的文本
• 将其添加到 DOM 并选中内容
• 调用 document.execCommand('copy')
• 移除临时元素

function copyTextFallback(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed'; // 避免滚动
  textarea.style.opacity = '0';
  document.body.appendChild(textarea);
  textarea.select();
  try {
    const successful = document.execCommand('copy');
    if (successful) {
      console.log('复制成功');
    } else {
      console.warn('复制失败');
    }
  } catch (err) {
    console.error('执行命令异常:', err);
  }
  document.body.removeChild(textarea);
}

综合兼容写法

结合两种方式，优先使用 Clipboard API，失败时降级到execCommand：

async function copyToClipboard(text) {
  if (navigator.clipboard && window.isSecureContext) {
    // 使用现代 API
    try {
      await navigator.clipboard.writeText(text);
      console.log('已复制到剪贴板');
    } catch (err) {
      console.warn('Clipboard API 失败，尝试降级方案');
      copyTextFallback(text);
    }
  } else {
    // 降级方案
    copyTextFallback(text);
  }
}

调用示例：

// 绑定按钮点击
document.getElementById('copyBtn').addEventListener('click', () => {
  copyToClipboard('这是要复制的内容');
});

注意事项

• Clipboard API 需要在安全上下文中运行（HTTPS 或 localhost）
• 用户操作触发（如点击事件）才能访问剪贴板，避免自动复制
• document.execCommand 已被废弃，仅用于兼容老浏览器
• iOS Safari 对 Clipboard API 支持有限，部分版本仍需使用输入框选中方案

基本上就这些，根据目标用户浏览器范围选择合适方案。优先使用现代 API，保留降级路径确保兼容性。不复杂但容易忽略安全与触发条件。