勉強したことのメモ

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

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

      2021/12/15

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった。以下に対応方法をメモ。尚、以前に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でチェックボックスの全チェック&チェック解除

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...

jQueryで画像が存在すれば表示、なければノーイメージ画像を表示

やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...

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

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

DateTimePickerで特定日にClassを付与&選択不可にする方法

jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...

jQueryで指定した要素を簡単にフォーカスするfocusbleの使い方

divやspanなど指定した要素を簡単にフォーカスするjQueryプラグインがあ ...

submit関連のjQuery2

<?php error_reporting(E_ALL & ~E_ ...

JavaScriptで画像に光沢をつける(glossy.js)

凄く簡単に光沢がつけられるライブラリがあったのでメモ。 ライブラリを呼び出してc ...

JavaScriptだけでTOPへ戻るリンクの表示

ページ内をある程度スクロールするとTOPへ戻るリンクを 表示させたかった。 ただ ...

highcharts.jsについて

プログラムの作りかえを行う際、既存のソースで highcharts.jsを使って ...

NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...