勉強したことのメモ

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

  関連記事

プラグインを使用せず、jQueryでオートページャー

プラグインを使わずにオートページャーを 作りたかった。 内容としては、 ・ターゲ ...

JavaScriptで文字列から数値へ変換時の注意

JavaScriptで文字列から数値へ変換時に思った挙動と異なることがあった。具 ...

クロスドメイン突破をjavascriptで行う

ajaxとかでクロスドメインを突破する際は、 PHPファイルを介すかJSONPを ...

jQueryの最新バージョン呼び出しとバージョン確認

<script type="text/javascript" src="h ...

javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

JavaScriptでUNIXタイムスタンプ取得

UNIXタイムスタンプを用いた際、 年月日からすぐUNIXタイムスタンプを出した ...

jQueryでボタンをクリックしてクリップボードにコピー

■2015/11/01追記 以下記事でライブラリとか無しで同様の機能がつけられる ...

jQueryで年月日と時間のピッカー(datetimepicker)

jQueryで年月日と時間を選択できるピッカーを導入したかった。以前にboots ...

Ajaxで画像のアップロード(jquery.upload)

業務中に画像の選択後、アップロードボタンを押して画像のアップ、 その後フォームの ...

jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...