【JavaScript】「クリップボード」にテキストをコピーする。

「JavaScriptを使ってクリップボードにテキストをコピーしたい！」

と思ってあれこれやったので記載しておきます。

公式
https://clipboardjs.com/
英語ドキュメントなので、解読がしんどかったですけど、
やれる事もやれない事も書いてます。

参考にしたサイト
https://syncer.jp/clipboardjs
英語読むの面倒って人はこっちでも良いかも。
僕はこっちも見ました。

簡単に動きの説明

cb.html

<div id="copyText">
  <span name="hoge">ココがコピーされる。</span>
  <a name="copy" data-clipboard-target="#copyText span[name=hoge]">クリップボードにコピー</a>
</div>

<script>
  $(document).on('click', 'a[name=copy]', function() {
    var cp = new Clipboard('a[name=copy]');
    cp.on('success', function(e) {
      // destroy()を指定しておかないと、延々とhiddenフィールドが増え続ける。
      // (気になる方はブラウザの開発者ツール開いた状態でクリップボードコピーしてみて下さい)
      cp.destroy();
    });
    cp.on('error', function(e) {
      alert('クリップボードへのコピーに失敗しました。');
      cp.destroy();
    });
  });
</script>

①aタグが押下される
②scriptが走り、a[name=copy]を探しにいく
③a[name=copy]と同タグ内のdata-clipboard-targetを探しにいく(->#copyText span[name=hoge])
④#copyText span[name=hoge]の内容をクリップボードにコピーする

補足①

上記のソースにも書いてますが、成功時/失敗時にdestroy()を指定してあげましょう。
別に指定しなくても問題はないと思いますが、延々とhiddenフィールドが増えて気持ち悪いです()

以下、公式より引用。

Also, if you are working with single page apps, you may want to manage the lifecycle of the DOM more precisely. Here's how you clean up the events and objects that we create.

補足②

Safariはクリップボードへのコピーが出来ないかもしれないです。
（セキリティ上の制約なので仕方ない）
（何かしらの方法はあるでしょうが、ここには記載しません。）

以上。