以前の記事で、Clipboard APIやclipboard-polyfillを調べたけど、iOSのSafariで使えないなど制限が。。

clipboard.jsのほうがサポートが広かったので、調べてみたときの備忘録。

インストール

$ npm install clipboard --save

使い方

基本的には、data属性を使って設定して、
クラス名などを指定して初期化すればOK。

<!-- コピーボタン。data属性でコピーするテキストを指定-->
<button class="btn copy-to-clipboard" data-clipboard-text="このテキストがコピーされる">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

<script>
// コピーボタンのセレクタを指定して初期化。
new ClipboardJS('.copy-to-clipboard');
</script>

inputの値を取得する場合

inputタグなどの値を取得することもできる。
また、成功/失敗などのイベントもある。

<!-- コピーしたいinput -->
<input id="target-elm" value="https://github.com/zenorocha/clipboard.js.git">

<!-- コピーボタン。data属性でターゲットのIDを指定-->
<button class="btn copy-to-clipboard" data-clipboard-target="#target-elm">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

<script>
// コピーボタンのセレクタを指定して初期化。
var clipboard = new ClipboardJS('.copy-to-clipboard');

// コピーが成功したときの処理
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>