HTML5代码如何实现复制粘贴 HTML5代码执行命令的兼容写法

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

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

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('这是要复制的内容');
});