JavaScriptでクリップボードにコピーする方法


  1. execCommandを使用する方法:

    function copyToClipboard(text) {
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
    }

    この方法では、テキストを一時的にtextarea要素にコピーし、document.execCommand("copy")を使用してコピー操作を実行します。

  2. Clipboard APIを使用する方法:

    function copyToClipboard(text) {
    navigator.clipboard.writeText(text)
    .then(function() {
      console.log("テキストがクリップボードにコピーされました");
    })
    .catch(function(err) {
      console.error("クリップボードへのコピーに失敗しました: ", err);
    });
    }

    この方法では、navigator.clipboard.writeText(text)を使用して指定したテキストをクリップボードに書き込みます。成功した場合はthenブロックが実行され、失敗した場合はcatchブロックが実行されます。

  3. ライブラリを使用する方法: JavaScriptのクリップボードコピーに特化したライブラリも利用できます。一つ例を挙げると、Clipboard.jsです。 まず、ライブラリをダウンロードまたはCDNから読み込みます。次に、以下のように使います:

    var clipboard = new ClipboardJS('.copy-button', {
    text: function(trigger) {
    return trigger.getAttribute('data-copy-text');
    }
    });

    この例では、.copy-buttonというクラスが付いた要素をクリックした際に、data-copy-text属性の値をクリップボードにコピーします。