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

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

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

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

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

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

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

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

data-clipboard-target属性とは

data-clipboard-target属性とは、指定したセレクタに紐づく要素の値をクリップボードにコピーする属性です。
jQueryのclipboard.jsというライブラリ内でのみ使うことができます。
ダウンロードについては、こちらの記事をご参考ください。

ボタンを押すと指定した要素の値をクリップボードにコピーする、というのがよく使われます。

使い方は

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

をすれば、data-clipboard-target属性を指定した要素をクリックすると、指定したセレクタに紐づく要素の値をクリップボードにコピーすることができます。

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

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

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

サンプルプログラムでは

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

の計3つを使います。

ボタンを押すとdata-clipboard-target属性で指定した要素の値をクリップボードにコピーするように指定します。
ボタンを押してクリップボードにコピーされているかを確認します。

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

HTMLサンプルプログラム

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

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開くと、以下のように表示されます。

jQueryのdata-clipboard-target属性を解説
「ボタンを押すとコピー」ボタンをクリックします。
すると、「テスト」というテキストが選択されている状態になりました。
jQueryのdata-clipboard-target属性を解説
これでクリップボードにコピーが完了しました。
本当にクリップボードにコピーできたか確認するため、テキストに貼り付けます。
jQueryのdata-clipboard-target属性を解説
クリップボードにコピーできていることを確認できました。

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

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

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

コメント

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