勉強したことのメモ

webプログラマが勉強したことのメモ。

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の方で対応する方が外部ファイルを読み込まなくいいので速度的にこちらの方が良いかも。

 - jQuery, JavaScript

  関連記事

HTML、javascriptソースの暗号化

サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...

jQueryで新しく追加した要素に対してイベントがきかない場合の対応

jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...

bootstrap-datetimepickerについて

日付のピッカーはよく見るけど、時間のピッカーはあまり見ないので、 普通のセレクト ...

画像をつなぎ合わせて360度ビューの様に見せるjQueryプラグイン

3Dデータではなく、コマ送りになっている2D画像を用いて360度ビューの様に見せ ...

八地方区分→都道府県→路線→駅名の連携したセレクトメニュー

八地方区分(関東、近畿等)をプルダウンから選ぶと区分内の都道府県プルダウンが表示 ...

alert後にページ遷移

JavaScriptのalertが閉じたらページ遷移させてほしいと言われ、con ...

submit関連のjQuery

<?php //jQueryでのsubmit,エンターキーでのsubmit ...

jQueryプラグインを作成する方法

jQueryのプラグインを作ってみたかった。 というのも大抵のものはググったらあ ...

jQueryでIPから位置情報の取得

jQueryのプラグインでお手軽にIPから 位置情報や経度緯度等調べられたのでメ ...

tableのヘッダーを残して表示(jquery-decapitate)

bootstrapはあまり使わないので切り離して使えるように したいところ。 ■ ...