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) {
// 処理が成功したときに呼ばれる処理
});
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>