勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

   2024/04/15  jQuery JavaScript

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

 

サンプル

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

 

プラグイン

公式サイトは以下。

https://clipboardjs.com/

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

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

 

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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

  関連記事

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法

システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...

表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法

どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...

jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法

あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...

S