2016/4/13更新

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要素に設定する内容

class	clipboard.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>

var clipboard = new Clipboard('.buttonに指定したクラス名');

clipboard.on('success', function(e) { 

// 処理が成功したときに呼ばれる処理

});

clipboard.on('error', function(e) {

// 処理が失敗したときに呼ばれる処理

});

</script>

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

e.action	data-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>

<!DOCTYPE html>

<html>

<head>

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>

<button class="btn" data-clipboard-target="#data">入力をコピー</button>

</p>

<p>

<button class="btn" data-clipboard-target="#data2" data-clipboard-action="cut">入力をカット</button>

</p>

</body>

</html>

サンプルプログラム

JavaScript

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

clipboard.jsを読み込む

clipboard.jsの指定方法

button要素に設定する内容

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

サンプルコード

サンプルプログラム

Welcome to UX MILK

目次

購読