JavaScriptでクリックした要素をクリップボードへコピーする

要素をクリックしたらコピーできるようなスクリプト

input要素やtextarea要素内の文字列をクリップボードへコピーするようなコードはよく見かけたものの、単純にdivとかspanとかpとかで囲んだ文字列をコピーするようなコードがなかなか見つからなかったので自分で作りました。

copyというクラスを付与した要素で動作するようにしています。

まずはHTMLを準備

以下のようなHTMLファイルがあるとします。

example.html

<div class="copy">この文字列をコピーさせるよ</div>

divである必要はありません。重要なのは、copyというクラスを与えることです。

肝心のJavaScriptコード

JavaScriptコードは以下のようになっています。めんどくさい方はコピペして使っちゃってください。

click_copy.js

(function () {
    var copyTarget,copyTargets,num,txt,range;
    copyTargets = document.querySelectorAll('.copy');

    ClickCopy = function() {
        copyTarget = this.textContent;

        txt = document.createElement("textarea");
        txt.value = copyTarget;

        document.body.appendChild(txt);
        txt.select();
        document.execCommand('copy');
        txt.parentElement.removeChild(txt);
    }

    for(i=0,num=copyTargets.length;i<num;i++) {
        copyTarget = copyTargets[i];
        copyTarget.addEventListener('click',ClickCopy);
    }

}());

今回は即時実行関数で作成しています。

使い方

クリックしたらクリップボードへコピーさせたい要素にcopyクラスをつけてください。

ちなみにcopyクラスではなく、任意のクラスをつけて実装する場合は上記のJavaScriptコードの３行目のquerySelectorAllの引数を任意のクラスに変えてください。

説明

変数copyTargetsにはcopyクラスが付与された要素のリストが入ります。

ClickCopy関数はクリップボードにコピーさせる機能の実体です。
変数copyTargetにはイベントで取得された要素のテキストノードが入ります。
新たにtextareaエレメントを作成したのちtxtに代入、値としてcopyTargetを入れます。
appendChildメソッドでbodyの末尾にノードを追加します。
その後、追加したノードを選択し、execCommandでコピー。その後txtを破棄します。

最後のfor文はクリックイベントを拾うための部分です。これによりhtmlファイル内のすべてのcopyクラスがつけられた要素でClipCopy関数が動きます。