clipboard.jsを使ってみる

以前テキストをクリップボードにコピーする実装を試してみましたが、今回はclipboard.jsを使ってクリップボードにコピーする方法を試してみます。

サンプルコード

読み込み方法はいくつかありますが、今回はCDNを使ってみます。

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

コピーに使用するボタンを指定します。

new ClipboardJS('.btn');

コピーに関する設定はdata属性で設定できます。
ボタンにテキスト要素を紐づけるのはdata-clipboard-targetを使用します。

<input id="foo" value="サンプルテキストA">
<button class="btn" data-clipboard-target="#foo">コピー</button>

これでボタンクリック時に#fooのテキストをコピーするようになりました。
コピーのデモページ

コピーではなくカットをしたい場合、data-clipboard-action属性で指定します。

<input id="foo" value="サンプルテキストB">
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#foo">カット</button>

カットのデモページ

inputやtextareaからのコピーではなく、コピーボタン自身にコピーするテキストを設定することもできます。
data-clipboard-text属性を使用します。

<button class="btn" data-clipboard-text="サンプルテキストC">コピー</button>

ページに表示されていないテキストをコピーするデモページ

ユーザーがコピーしたタイミングで処理を実行することもできます。
その際にコピーした対象やテキストを取得できるので、ツールチップなどを出すことも可能です。

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
	console.log('Action:', e.action);
	console.log('Text:', e.text);
	console.log('Trigger:', e.trigger);
	e.clearSelection();
});

clipboard.on('error', function(e) {
	console.log('Action:', e.action);
	console.log('Trigger:', e.trigger);
});

イベントのデモページ