JS兼容性复制剪切板

前言

有时候，navigator.clipboard对象可能会不存在。

因为我们要做一套降级处理！

封装

copy.js

function fallbackCopyText(text) {
  const textarea = document.createElement("textarea");
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  try {
    document.execCommand("copy");
    console.log("复制成功（降级方案）");
  } catch (err) {
    console.error("复制失败:", err);
  }
  document.body.removeChild(textarea);
}

async function copyToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyText(text); // 降级方案
    return;
  }
  try {
    await navigator.clipboard.writeText(text);
    console.log("复制成功！");
  } catch (err) {
    console.error("复制失败:", err);
    fallbackCopyText(text); // 降级方案
  }
}

 export default copyToClipboard;

使用

 // 使用方式（必须在用户交互中触发，如点击事件）
document.getElementById("copyButton").addEventListener("click", () => {
    copyToClipboard("Hello World");
});