ウェブデザイナーの毎日のお仕事のメモ

作成日:2021.01.25  最終更新日:2021.02.03

js / jQuery

テキストをクリップボードにコピーするためのclipboard.jsの使い方

テキストをクリップボードにコピーさせるためのclipboard.jsの使い方メモです。

clipboard.jsの使い方手順

①ファイルのダウンロード

clipboard.jsのページの、『download a ZIP』の部分よりファイルをダウンロードできます。
※下の画像をご参照ください。

②必要なファイルをサーバーにアップロードする

  • clipboard.js

ファイルを任意のフォルダにアップロードする。

※minファイルではないファイルも準備されていますので、ご自身の用途に合わせてしようファイルをお選びください。

③ファイルを読み込む

※ファイルのパスはご自身の環境に合わせて書き換えてください。

<script src="js/clipboard.js"></script>

④HTML、JSに必要な記述をする

ここからは、次のセクションでパターン別に書いていきます。

clipboard.jsの使い例

基本の書き方

コピーするためのボタンを押したら、該当のテキストがコピーされるというシンプルなものを最初にご紹介します。

HTML

コピーするためのトリガーになるボタンなどと、コピーしたい対象の要素を準備して、コピーするトリガーになる要素に、data-clipboard-target="ここは適宜変える"を指定します。
以下の通りです。

<p id="clipboard-text">ここの文字がコピーされます。</p>
<button class="btn-copy" data-clipboard-target="#clipboard-text">コピーする</button>

JS

JSは以下の通りです。

var clipboard = new ClipboardJS('.btn-copy');

サンプル

上記コードのサンプルは以下の通りです。

ここの文字がコピーされます。

コピーが成功したことをお知らせする書き方

上記のサンプルでは、ほんとにコピーできたのか分かりづらかったかと思います。なので、元々用意されているイベントを利用して、『コピーできました!』とアラートを出す書き方を以下に記します。
※HTMLは上記で使用したものと同じものを使用します。

JS

var clipboard = new ClipboardJS('.btn-copy');

clipboard.on('success', function(e) {
  alert('コピーできました!')
});

サンプル

以下にサンプルを作成したので、実際にみてみてください。

ここの文字がコピーされます。コピーできたらアラートが表示されますよ。

今回はアラートを出す、としていますが、successイベントを使うと、コピーが成功したときに、色々なことができます。
反対に、errorイベントを使うと、コピーが失敗したことを知らせることもできます。

クリックした要素自体にコピーする内容を仕込む書き方

上記では、コピーするためのトリガーになるボタンと、コピーしたい対象の要素を分けて準備していましたが、トリガーになる要素自体にコピーしたいテキストを持たせることもできます。

HTML

トリガーになる要素に以下のように、data-clipboard-textを追加して、そこにコピーしたいテキストを入力しておきます。

<p>必要なテキストを<a class="btn-copy" data-clipboard-text="こちらがコピーされたテキストです。">コピー</a>する</p>

JS

var clipboard = new ClipboardJS('.btn-copy');

サンプル

以下のサンプルでは、aタグで囲まれた部分をクリックすると、『こちらがコピーされたテキストです。』というテキストがコピーされます。

必要なテキストをコピーする

最新記事