[JavaScript] ”クリップボードにコピー” ボタンを実装する（clipboard.jsの使い方）

clipboard.js の使い方メモ。すごく簡単に クリップボードにコピー ボタンを追加できます。

clipboard.js — Copy to clipboard without Flash

ライセンスは MIT license です。

インストール

cdn

CDN Providers · zenorocha/clipboard.js Wiki

npm

npm

$ npm install clipboard --save

使用例

基本的に data-clipboard-target="#idname" で任意のidを指定するだけで良いです。

index.html

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.0/clipboard.min.js"></script>

<input type="text" value="クリップボードコピーテスト(input)" id="input_test">
<button class="btn" type="button" data-clipboard-target="#input_test">Copy</button>

<textarea id="textarea_test">
クリップボードコピーテスト(textarea)
</textarea>
<button class="btn" type="button" data-clipboard-target="#textarea_test">Copy</button>

<script>
(function() {
'use strict';

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

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

    e.clearSelection();
});

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

})();
</script>

オプションとして data-clipboard-action="cut" の指定で切り取りに変更もできます。

Vue.jsと組み合わせて使用する場合

※Vue.jsと組み合わせて使用する場合はやり方が若干異なります。以下の記事を参照してください。

[Vue.js][clipboard.js] Vue.jsとclipboard.jsを組み合わせて使用する - Qiita

参考

clipboard.js — Copy to clipboard without Flash