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関数が動きます。