jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった。以下に対応方法をメモ。尚、以前にJavaScriptで同様の機能を実装しているのでプラグインを使いたくない場合は当該記事を参照。

サンプル

https://taitan916.info/sample/clipboard.js/

プラグイン

公式サイトは以下。

https://clipboardjs.com/

CDNで読み込みたい場合は以下。

https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

ソースコード

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>clipboard.jsサンプル</title>
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>

    <div id="clipboard-target-1">テスト1</div>
    <a href="javascript:void(0);" class="btn btn-success clipboard-btn" data-clipboard-target="#clipboard-target-1">
        クリップボードにコピー
    </a>

    <div id="clipboard-target-2">テスト2</div>
    <a href="javascript:void(0);" class="btn btn-success clipboard-btn" data-clipboard-target="#clipboard-target-2">
        クリップボードにコピー
    </a>

    <script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
    <script src="//cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <script>
    $(function(){
        //クリップボードへコピー
        const clipboard = new ClipboardJS('.clipboard-btn');
        clipboard.on('success', function(e) {
            alert('クリップボードにコピーしました。');
            e.clearSelection();
        });
        clipboard.on('error', function(e) {
            alert('クリップボードにコピーできませんでした。');
        });
    });
    </script>
</body>
</html>

所感

以前にFlashをどうこうする方法をメモしたのは覚えていたが、JavaScriptの方は完全に忘れていた。JavaScriptの方で対応する方が外部ファイルを読み込まなくいいので速度的にこちらの方が良いかも。