JavaScript はクリップボードへのコンテンツのコピーを実装します

方法 1. コンテンツをクリップボードにコピーする方法は、ブラウザーによって異なります。Clipboard API を使用し、ブラウザーの互換性処理を提供する実用的なソリューションを次に示します。

このコードは、指定されたリンクを含む一時的な textarea 要素を作成し、それを現在のドキュメントの本文に追加します。次に、その要素内のテキストを選択してコピーし、 document.execCommand("copy") コマンドを使用してそれをクリップボードにコピーします。最後に、コードは一時要素を削除します。

このメソッドでは、ユーザーがブラウザでクリップボードへのアクセスを許可する必要があることに注意してください。特定のブラウザは、このアクセス方法をブロックする可能性があるため、信頼できません。

// 获取要复制到剪切板的链接
const link = "https://www.example.com";

// 创建临时 <textarea> 元素，将链接写入其中
const textArea = document.createElement("textarea");
textArea.value = link;
document.body.appendChild(textArea);

// 选中并复制链接
textArea.select();
document.execCommand("copy");

// 将 <textarea> 元素删除
document.body.removeChild(textArea);

方法 2: コンテンツをクリップボードにコピーする方法は、ブラウザーによって異なります。Clipboard API を使用し、ブラウザーの互換性処理を提供する実用的なソリューションを次に示します。

ここでは、まずブラウザが Clipboard API をサポートしているかどうかを確認します。API が現在のブラウザーでサポートされていない場合は、従来の document.execCommand("copy") 方法を使用してテキストをコピーします。クリップボード API をサポートするブラウザーの場合、 navigator.clipboard.writeText(text) メソッドを呼び出してテキストをクリップボードにコピーします。この方法は面倒ですが、ほとんどのブラウザーで互換性を保証できます。

function copyToClipboard(text) {
  // 检查浏览器是否支持 Clipboard API
  if (!navigator.clipboard) {
    // 如果不支持，则使用传统的 document.execCommand("copy") 方式
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    document.execCommand("copy");
    document.body.removeChild(textArea);
    return;
  }

  // 使用 Clipboard API 复制内容到剪切板
  navigator.clipboard.writeText(text).then(
    function() {
      console.log("复制成功");
    },
    function() {
      console.log("复制失败");
    }
  );
}

// 调用 copyToClipboard 函数，传入要复制的文本作为参数
copyToClipboard("这是一段需要复制到剪贴板的文本");