テキストをクリップボードにコピーできる”clipboard.js”の使い方
「clipboard.js」はクリックで特定の文字列をクリップボードにコピーすることができるとても軽量なJavaScriptライブラリです。
「clipboard.js」の使い方といくつかの使用例を紹介していきます。
「clipboard.js」のサイト：https://clipboardjs.com/
「clipboard.js」の使い方
「clipboard.js」を使うときの手順を紹介します。
詳細は上で紹介した「clipboard.js」のサイトにも説明がありますので参考にしてみてください。
「clipboard.js」の読み込み
「clipboard.js」の読み込みは、こちらのGitHubページからダウンロードするかまたはCDNを利用することができます。
ダウンロードして利用する場合、GitHubページの「dist」フォルダ内に「clipboard.min.js」がありますので、サイトに設置してpathを設定します。
<script src="path-to/clipboard.min.js"></script>CDNを利用する場合の例
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>インスタンス化
triggerとなる要素を指定してインスタンス化します。
「btn」というクラス名をつけた要素をコピーのトリガーにしたい時は以下のように記述します。
new ClipboardJS('.btn');targetとtriggerの指定
使用したい状況に合わせて、htmlファイル内でtarget（コピーしたい文字列）とtrigger（コピーしたい時にクリックする要素）を指定します。
コピー完了などの通知
「clipboard.js」のサイトで紹介されている実装例ではコピー完了時にツールチップが表示されますが、この機能は「clipboard.js」自体には含まれていません。
「clipboard.js」自体には、コピーが成功（success）または失敗（error）した時のカスタムイベントのみが用意されていますので、何らかの通知が欲しい場合にはこれらを利用して自分で作成する必要があります。
後ほど、このカスタムイベントを利用して簡単なツールチップを表示させるときの記述例を紹介します。
「clipboard.js」の使用例
「clipboard.js」の使用例をいくつか紹介します。
コピーしたい文字列自体をクリックしてコピーする例
同じ要素内にtargetとtriggerがある場合は、その要素内に「data-clipboard-text=”（コピーしたい文字列）”」と指定するだけで文字列がコピーされます。
See the Pen
WNvYReK by saku (@web-saku)
on CodePen.
コピーしたい文字列の表示はなくコピーボタンだけを設置する例
上の例と同様、同じ要素内にtargetとtriggerがあるので、コピーボタンを設置して要素内に「data-clipboard-text=”（コピーしたい文字列）”」と指定することで文字列がコピーされます。
See the Pen
MWwzJjM by saku (@web-saku)
on CodePen.
アイコンなどを利用してコピーボタンを設置する例
targetとtriggerが別々の要素内にある時の指定方法としては、targetの要素にidを設定して、triggerとなる要素に「data-clipboard-target=”（id）”」という記述を設置してtargetを指定します。
See the Pen
RwPqVNN by saku (@web-saku)
on CodePen.
コピー完了の通知を表示させる
先ほど紹介したコピー成功（success）のカスタムイベントを利用して、コピー完了時にツールチップを表示させるときの記述例を紹介します。
See the Pen
mdJQRMX by saku (@web-saku)
on CodePen.
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す