【jQuery】data-clipboard-text属性について解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、12年目エンジニアです。

この記事では、 jQuerydata-clipboard-text属性について

  • data-clipboard-text属性とは
  • data-clipboard-text属性を使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10
clipboard.jsのバージョン 2.0.8

data-clipboard-text属性とは

data-clipboard-text属性とは、クリップボードにコピーするテキストを指定できる属性です。
jQueryのclipboard.jsというライブラリ内でのみ使うことができます。
ダウンロードについては、こちらの記事をご参考ください。

固定文言をクリップボードにコピーしたいときに使われます。

使い方は

  1. HTML側で要素にdata-clipboard-text属性でクリップボードにコピーしたい値を設定
  2. JavaScript側で以下を記載

をすれば、クリックするとdata-clipboard-text属性に指定した値をクリップボードにコピーすることができます。

セレクタについては、こちらの記事をご参考ください。

では、次の章で実際に使ってみます。

data-clipboard-text属性を解説するサンプルプログラム

サンプルプログラムでは

  • HTML
  • clipboard.jsライブラリ
  • JavaScript

の計3つを使います。

HTMLでタグを作成して、クリックするとdata-clipboard-text属性に指定している値がクリップボードにコピーされているかを確認します。

解説で使うサンプルプログラムのディレクトリ構造は以下のようになっています。
クリップボードにコピーするサンプルプログラム

HTMLサンプルプログラム

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開くと、以下のように表示されます。
jQueryのdata-clipboard-text属性を解説

「「テスト」をコピーする」という部分をクリックします。
クリック前後で特に何も変わりませんが、これでクリップボードにコピーが完了しました。
本当にクリップボードにコピーできたか確認するため、テキストに貼り付けます。
jQueryのdata-clipboard-text属性を解説
クリップボードにコピーできていることを確認できました。

まとめ:data-clipboard-text属性を使ってみよう

以上がjQueryのclipboard.jsライブラリで使えるdata-clipboard-text属性についての解説でした!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました