JavaScriptでクリップボードにコピーするボタンを設置する方法

JavaScriptでクリップボードにデータをコピーしたい場合、clipboard.jsを使用すると簡単に実装することができます。clipboard.jsはMIT Licenseのオープンソース・ソフトウェアで、実装している機能をサポートしているブラウザはChrome 42以上、Firefox 41以上、IE9以上、Opera29以上です。Safari9.1はサポートしていません。

clipboard.jsを読み込む

clipboard.jsを使用するためには、script文で以下のファイルを読み込むことで使用することができます。
https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js

または、以下のURLからライブラリをダウンロードし、distディレクトリ内のコードを読み込んでも使用することができます。
https://github.com/zenorocha/clipboard.js

clipboard.jsの指定方法

clipboard.jsを使用するには、処理の実行を指定するbutton要素とスクリプトの処理内容を以下のように記述します。

button要素に設定する内容

classclipboard.jsの処理を記述するスクリプトに指定するクラス名
data-clipboard-action"copy"または"cut"を指定、
指定が無い場合は”copy”処理が行われる
data-clipboard-textコピー対象のテキストをbuttonに記述する場合に使用する
data-clipboard-targetテキストエリア内のテキストを処理対象とする場合にテキストエリアに指定したid名を指定する

スクリプトの処理方法の書き方

<script>
var clipboard = new Clipboard('.buttonに指定したクラス名');
clipboard.on('success', function(e) {&nbsp; 
  // 処理が成功したときに呼ばれる処理
});
clipboard.on('error', function(e) { 
  // 処理が失敗したときに呼ばれる処理
});
</script>

処理後に呼ばれる関数には、次の変数が返されます。

e.actiondata-clipboard-actionで指定した内容
e.textクリップボードにコピーされた内容
e.trigger 処理を実行したbuttonの内容

サンプルコード

以下のコードはクラス名がbtnのbutton要素に対して処理を行っています。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>
    <script>
      var clipboard = new Clipboard('.btn');
      clipboard.on('success', function(e) {
        console.info('Trigger:', e.trigger);
      });
      clipboard.on('error', function(e) {
        console.error('Trigger:', e.trigger);
      });
    </script>
  </head>

  <body>
    <p>
      <button class="btn" data-clipboard-text="ABC">ABCをコピー</button>
    </p>

    <p>
      <input id="data" type="text" size="20">
      <button class="btn" data-clipboard-target="#data">入力をコピー</button>
    </p>

    <p>
      <input id="data2" type="text" size="20">
      <button class="btn" data-clipboard-target="#data2" data-clipboard-action="cut">入力をカット</button>
    </p>
  </body>
</html>

サンプルプログラム


イベント

2017/12/05(火)
Design Thinking Square